1//css keyframes
2#image{
3 width: 100px;
4 height: 100px;
5 background-color: red;
6 position: relative;
7 animation: monFrame 5s linear 2s infinite alternate;
8
9 }
10 @keyframes monFrame {
11 0% {left:0px; top:0px;}
12 25% {left:500px; top:0px;}
13 50% {left:500px; top:500px;}
14 75% {left:0px; top:500px;}
15 100% {left:0px; top:0px;}
16 }
1p {
2 animation-duration: 25s;
3 animation-name: slidein;
4}
5
6@keyframes slidein {
7 from {
8 margin-left: 100%;
9 width: 300%;
10 }
11 75% {
12 font-size: 300%;
13 margin-left: 25%;
14 width: 150%;
15 }
16
17 to {
18 margin-left: 0%;
19 width: 100%;
20 }
21}
1div {
2 width: 100px;
3 height: 100px;
4 background: red;
5 position: relative;
6 animation: mymove 5s infinite;
7}
8
9@keyframes mymove {
10 0% {top: 0px;}
11 50% {top: 50px;}
12 75% {top: 40px;}
13 100%{top: 0px;}
14}
1@keyframes mymove {
2 0% {top: 0px;}
3 50% {top: 50px;}
4 75% {top: 40px;}
5 100%{top: 0px;}
6}
1/* @keyframes duration | easing-function | delay |
2iteration-count | direction | fill-mode | play-state | name */
3animation: 3s ease-in 1s 2 reverse both paused slidein;