1<style>
2@keyframes animatename{
3 0%{
4 transform: translateY(3px);
5 }
6 100%{
7 transform: translateY(-3px);
8 }
9}
10.my-div{
11 animation: animatename 1s linear infinite;
12 /* animation shorthand */
13 animation: animation-name animation-duration animation-direction animation-iteration-count
14}
15</style>
1/* On a une seule animation */
2animation-play-state: running;
3animation-play-state: paused;
4
5/* On gère plusieurs animations */
6/* avec des valeurs respectives */
7animation-play-state: paused, running, running;
8
9/* Valeurs globales */
10animation-play-state: inherit;
11animation-play-state: initial;
12animation-play-state: unset;
1<style>
2.my-element {
3 width: 100%;
4 height: 100%;
5 animation: tween-color 5s infinite;
6}
7
8@keyframes tween-color {
9 0% {
10 background-color: red;
11 }
12 50% {
13 background-color: green;
14 }
15 100% {
16 background-color: red;
17 }
18}
19
20html,
21body {
22 height: 100%;
23}
24<style>
25
26<body>
27 <div class="my-element"></div>
28</body>
1animation: name time func delay iteration dir fill play;
2animation: none 0s ease 0s 1 normal none running;
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
28</html>
1animation: name duration timing-function delay iteration-count direction fill-mode play-state;
2/*
3name: name of the animation
4duration: amount of time it takes to complete ex: 2s
5timing-function: Specifies the speed curve of the animation ex: linear, ease, etc.
6delay:Specifies a delay before the animation will start
7iteration-count: how many times to play the animation, ex: initial
8direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse
9fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both
10animation-play-state: Specifies whether the animation is running or paused
11*/
12