Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Last active August 29, 2015 14:25
Show Gist options
  • Save anonymoussc/a5625fbd2a7ef2cc91a8 to your computer and use it in GitHub Desktop.
Save anonymoussc/a5625fbd2a7ef2cc91a8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Keyframe animation
Raw
README.md

##CSS Keyframe animation

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Keyframe animation</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="animationOne">
AnimationOne - Keyframes: first-animation
</div>
<div class="animationOnePercentage">
AnimationOne - Keyframes: first-animation-percentage
</div>
<div class="animationTwo">
AnimationTwo - Keyframes: second-animation-timing
</div>
</body>
</html>
Raw
style.css
@-webkit-keyframes first-animation {
from {
border-color : blue;
}
to {
border-color : red;
}
}
@-moz-keyframes first-animation {
from {
border-color : blue;
}
to {
border-color : red;
}
}
@-o-keyframes first-animation {
from {
border-color : blue;
}
to {
border-color : red;
}
}
@keyframes first-animation {
from {
border-color : blue;
}
to {
border-color : red;
}
}
@-webkit-keyframes first-animation-percentage {
0% {
border-color : blue;
}
100% {
border-color : red;
}
}
@-moz-keyframes first-animation-percentage {
0% {
border-color : blue;
}
100% {
border-color : red;
}
}
@-o-keyframes first-animation-percentage {
0% {
border-color : blue;
}
100% {
border-color : red;
}
}
@keyframes first-animation-percentage {
0% {
border-color : blue;
}
100% {
border-color : red;
}
}
@-webkit-keyframes second-animation-timing {
0% {
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}
25% {
transform : translateX(50px);
-webkit-animation-timing-function : ease-out;
animation-timing-function : ease-out;
}
50% {
transform : translateX(100px);
-webkit-animation-timing-function : linear;
animation-timing-function : linear;
}
100% {
transform : translateX(200px);
}
}
@keyframes second-animation-timing {
0% {
animation-timing-function : ease-in;
}
25% {
transform : translateX(50px);
animation-timing-function : ease-out;
}
50% {
transform : translateX(100px);
animation-timing-function : linear;
}
100% {
transform : translateX(200px);
}
}
.animationOne {
border : 2px solid black;
width : 400px;
-o-animation-name : first-animation;
-moz-animation-name : first-animation;
-webkit-animation-name : first-animation;
animation-name : first-animation;
-o-animation-duration : 5s;
-moz-animation-duration : 5s;
-webkit-animation-duration : 5s;
animation-duration : 5s;
}
.animationOnePercentage {
border : 2px solid black;
width : 400px;
-o-animation-name : first-animation-percentage;
-moz-animation-name : first-animation-percentage;
-webkit-animation-name : first-animation-percentage;
animation-name : first-animation-percentage;
-o-animation-duration : 5s;
-moz-animation-duration : 5s;
-webkit-animation-duration : 5s;
animation-duration : 5s;
}
.animationTwo {
border : 2px solid black;
width : 400px;
-o-animation-name : second-animation-timing;
-moz-animation-name : second-animation-timing;
-webkit-animation-name : second-animation-timing;
animation-name : second-animation-timing;
-o-animation-duration : 5s;
-moz-animation-duration : 5s;
-webkit-animation-duration : 5s;
animation-duration : 5s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment