Stack Overflow
Stack Overflow

Questions tagged [keyframe]

Keyframes is a general term in animations that is used to refer to the starting point and the finishing point of an animated transition. Use alongside the [css] tag if you want to refer to the @keyframes rule used in CSS animations.

Keyframes in general are starting and ending points of a particular smooth animation transition.

In CSS, the @keyframes rule is used to create animations. The following URL elaborates the usage of keyframes in CSS: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

874 questions
13
votes
2 answers

Rainbow text animation using only CSS

I got inspired by this Rainbow Text Animation rainbow-text-animation, and I would like to use only CSS to make this happen instead of all that complicated SCSS coding. I got what I like so far and now I just want to make it go from left to right AND…
Azazel
  • 573
  • 3
  • 10
  • 23
12
votes
5 answers

How can I set a CSS keyframes in Javascript?

I have a CSS keyframes shown as below, my problem is I would like to set it as JavaScript (to put inside my div which already have some functions) so that I can return the "element" value to my function .cylon-eye { background-color: yellow; …
Ivy Hoo Hui En
  • 121
  • 1
  • 1
  • 5
12
votes
3 answers

Passing parameters to css animation

p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } For the animation CSS code above, I'm wondering whether…
user1663023
11
votes
6 answers

CSS-moving text from left to right

I want to create an animated HTML "marquee" that scrolls back and forth on a website:
This is a marquee!
and the CSS: .marquee { position: absolute; white-space: nowrap; -webkit-animation: rightThenLeft 4s…
tanis.control
  • 115
  • 1
  • 1
  • 5
10
votes
3 answers

CSS horizontal line animation (gradient colors)

I have colored, animated, vertical line like this one: @keyframes colored { 0% { background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%,…
Mkay1
  • 185
  • 1
  • 10
9
votes
5 answers

How can I get working keyframe animation?

I am trying to animate as ripple effect. It seems to work fine on chrome browser but not working on safari, also I have other animations in the same page that are working fine on chrome and safari both but not this one. I wonder what I am doing…
Salman Ullah Khan
  • 730
  • 10
  • 29
9
votes
1 answer

Pure CSS countdown animation

I'm trying to do a pure HTML/CSS countdown animation but I'm struggling to make it work smoothly. For now I'm only covering minutes and seconds. Notice that I'm using animation-delay property for resetting my countdown to a certain initial time. For…
Esteban Cazorla
  • 93
  • 1
  • 4
9
votes
1 answer

CSS infinite horizontal scroll with keyframe?

As a student, I'm actually making my own portfolio. For the header, I tried to create a sky effect, with an image scrolling horizontally. I used CSS and keyframes, the problem I have is that when the image come to the end, it "resets" and doesn't…
ShiroHaru __
  • 103
  • 1
  • 1
  • 5
9
votes
3 answers

How to make the animation smooth?

I am trying to create a pre-loader which changer its height, width, border-radius and background color. The animation works, but it has a pause between the changes. How to make the animation smoother? The fiddle:…
Altair827
  • 329
  • 1
  • 2
  • 10
9
votes
2 answers

Keyframe animations with SCSS not working

I'm new to keyframe animations and after some searching this article seemed like a good place to start. Here is the articles code in codepen - http://codepen.io/anon/pen/yYPxJM @mixin keyframes($animation-name) { @-webkit-keyframes $animation-name…
dcpomfret
  • 105
  • 1
  • 1
  • 5
9
votes
2 answers

Detect which AnimationEnd has fired via animationName

I have several CSS3 animations linked to one div, but I only want a function to be callad a the end of the last animation. I have used the animationEnd event so that I can trigger said function but as I said I only want the it to run on the last…
Damon
  • 115
  • 1
  • 1
  • 6
8
votes
2 answers

Extract first non black keyframe with FFMPEG

I'm trying to extract a thumbnail image from a video keyframes using ffmpeg, my command line is: ffmpeg -i video.mp4 -vframes 1 -s 200x200 -vf select="eq(pict_type\,PICT_TYPE_I)" -vsync 0 -f image2 video.jpg But the keyframe it extracts is totally…
Simone Margaritelli
  • 4,584
  • 10
  • 45
  • 70
8
votes
3 answers

Run css animation back and forth on clicks

With css @keyframes I'm trying to attach some animation to an element when it is clicked. .animate { animation-name: action; animation-duration: 2s; animation-timing-function: linear; background-color: green; } @keyframes action…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
8
votes
1 answer

CSS3 filter blur keyframe animation

What I'm trying to accomplish is a short gaussian blur animation on an image hover. Somewhat like setting focus on a camera. (focused-blurred-focused). This is what I got so far: @-webkit-keyframes image_blur { 0% { -webkit-filter: blur(0px);} …
Jefferson
  • 993
  • 2
  • 16
  • 35
7
votes
1 answer

Use different @keyframes based on parent element class

I have an animation like below: @keyframes pulseColorGreen { 0% { background-color: green; } 97%{ background-color: green; } 100% { background-color: white; } } My website also has a dark mode where…
Kashyap Kotak
  • 1,888
  • 2
  • 19
  • 38
1
2
3
…
58 59