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
7
votes
1 answer

Extracting keyframes | Python | Opencv

I am currently working on keyframe extraction from videos. Code : while success: success, currentFrame = vidcap.read() isDuplicate = False limit = count if count <= 10 else (count - 10) for img in xrange(limit, count): …
Rudra
  • 149
  • 1
  • 2
  • 11
7
votes
1 answer

!important with keyframe animations

The spec for keyframe animations says that !important will be ignored in keyframes -- it's invalid if set inline in the animation declaration. From the example spec: @keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px…
Union find
  • 7,759
  • 13
  • 60
  • 111
7
votes
1 answer

How to reverse a CSS animation on unchecked state?

My project will display a sunny field and a check box that says "make it rain". Upon clicking the button the sun sets, and clouds come in, and there will be animated CSS rain. I'm using a checked pseudo class to start the rain animation and the…
Longblog
  • 821
  • 2
  • 11
  • 19
6
votes
2 answers

How do I change a background position with css3 animation?

Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover I can't seem to use keyframes properly, it never works and I have all the latest browsers. Thanks.
fenerlitk
  • 5,414
  • 9
  • 29
  • 39
6
votes
2 answers

Unexpected animation behaviour in safari

I have chain of animations happening demonstrated below (see gif's). There is one particular animation called fadeIn that works fine on chrome and firefox, yet has this strange flashing behaviour in safari. Here is animation code: @keyframes fadeIn…
Ilja
  • 44,142
  • 92
  • 275
  • 498
6
votes
2 answers

Force a property of an element to a certain value even as it's being animated

I have two types of elements, let's call them .a and .b. They may have some CSS animations set on them. I don't have control over these keyframes, over whether they're set or not, over what they're animating. They may be animating opacity. However,…
Ana
  • 35,599
  • 6
  • 80
  • 131
6
votes
3 answers

Choppy and Jerky CSS3 animation in Firefox on new "page load"

I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages. I am using keyframe animation on rotateY. The issue is that on Firefox, while navigation to another page, the animation does work, but its very jerky…
Shubham Sharma
  • 71
  • 1
  • 3
6
votes
1 answer

WPF - animate image source change

I'm pretty new to WPF but I think what I need to do is relatively simple. I need to create an image "animation", where I am changing an image source every .25 of a second. I have a folder named "animation" with images 1 to 25 png live (named 1.png,…
Rob
  • 6,819
  • 17
  • 71
  • 131
6
votes
3 answers

Animate block back and forth within div continuously with CSS3 keyframes

I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this: @-webkit-keyframes backandforth { 0% {text-align:left;} 50%{text-align:right;}…
Applecot
  • 239
  • 1
  • 2
  • 9
6
votes
1 answer

Firefox won't play keyframe animations defined inside SVG embeded as background-image

I have an SVG with @keyframe animationS defined inside a