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
83
votes
9 answers

How to prevent a CSS keyframe animation from running on page load?

I have a div in which I animate the content: #container { position: relative; width: 100px; height: 100px; border-style: inset; } #content { visibility: hidden; -webkit-animation: animDown 1s ease; position: absolute; top: 100px; …
Szabolcs
  • 1,463
  • 2
  • 12
  • 20
79
votes
3 answers

How to have css3 animation to loop forever

I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page to reload at the end of the last photo fade out. Is there any other…
CuRSoR
  • 801
  • 1
  • 6
  • 3
79
votes
2 answers

SASS (not SCSS) syntax for css3 keyframe animation

Is there any way to write keyframes in SASS? Every example I have found is actually SCSS, even when it says it's SASS. To be clear, I mean the one with no curly brackets.
daviestar
  • 4,531
  • 3
  • 29
  • 47
71
votes
3 answers

CSS3 - Transition on DOM Removal

Using keyframes, it is possible to animate an element as soon as it is inserted into the DOM. Here's some sample CSS: @-moz-keyframes fadeIn { from {opacity:0;} to {opacity:1;} } @-webkit-keyframes fadeIn { from {opacity:0;} to…
Steve
  • 2,023
  • 3
  • 17
  • 25
59
votes
6 answers

How to split a video using FFMPEG so that each chunk starts with a key frame?

We need to split a large live WMV video feed in small chunks all of the same size. We made a script that works fine doing this, except for one thing: the video chunks don't start with a key frame, so when playing most video chunks they don't display…
sboisse
  • 4,860
  • 3
  • 37
  • 48
40
votes
3 answers

Set Webkit Keyframes Values Using Javascript Variable

I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform:…
Sasha
  • 465
  • 1
  • 5
  • 9
38
votes
3 answers

Checking keyframe interval?

How can I check keyframe interval of a video file? all I can see in ffmpeg output is: Metadata: metadatacreator : Yet Another Metadata Injector for FLV - Version 1.8 hasKeyframes : true hasVideo : true hasAudio :…
rabotalius
  • 1,430
  • 5
  • 18
  • 27
35
votes
2 answers

How to change keyframe interval?

How to set the keyframe interval to 5 seconds using FFmpeg?
Samarth Misra
  • 361
  • 1
  • 3
  • 6
25
votes
4 answers

Cross-Fade between images with CSS in loop

I want to fade between images in a loop (like result here-jsfiddle.net/5M2PD) but purely through CSS, no JavaScript. I tried using key-frames but I wasn't successful. Please Help. @keyframes cf3FadeInOut { 0% { opacity:1; } 45%…
Rachit Sharma
  • 341
  • 1
  • 4
  • 14
18
votes
3 answers

CSS3 Animate Out of :hover

I'm setting up a simple animation that brings up a little additional information when you hover over an image. The jQuery backup part is written and works fine, though the issue I'm having trouble with is getting the CSS3 animation to go in reverse…
Andrew
  • 1,819
  • 5
  • 23
  • 31
17
votes
2 answers

Can I set the progress of a keyframe animation to a specific stage?

I have a keyframe animation with multiple steps: @keyframes rotateLeftSideCustom { 0% { } 40% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); opacity: .8; …
nils
  • 25,734
  • 5
  • 70
  • 79
16
votes
3 answers

How to use Media Queries inside a React Styled Components Keyframe?

I can get media queries to work properly inside a regular styled-components component however when I attempted to use it in a keyframe (via import from styled-components) it does not seem to work at all. Attempting to get a div to animate to a…
damon
  • 2,687
  • 8
  • 25
  • 35
15
votes
5 answers

Smoothly stop CSS keyframe animation

I have the following code: http://jsfiddle.net/odj8v0x4/. function stopGlobe() { $('.mapfront').removeClass('mapfront-anim'); $('.mapback').removeClass('mapback-anim'); } function startGlobe() { …
ollazarev
  • 1,076
  • 8
  • 26
14
votes
2 answers

Can a property of a child element be set in a keyframe

I have successfully animated a div using @keyframes but I need to alter properties of child elements of that div at the same time. Is there a way to address a child element from within a keyframe? HTML
…
GKanes
  • 143
  • 1
  • 4
13
votes
5 answers

Key Frame Extraction From Video

I need Need To extract Key Frames from Video/Stream.So is there any standard implementation. I am using open CV. (Currently i am extracting frames each second which is slower i need to improve performance.) So if any one has optimized implementation…
user1178178
  • 147
  • 1
  • 1
  • 6
1
2 3
…
58 59