diff --git "a/[03] Personnage anim\303\251/CSS/style.css" "b/[03] Personnage anim\303\251/CSS/style.css" index ee42638..f59cb7f 100644 --- "a/[03] Personnage anim\303\251/CSS/style.css" +++ "b/[03] Personnage anim\303\251/CSS/style.css" @@ -27,6 +27,12 @@ animation-timing-function: linear; animation-iteration-count: infinite; } +/* New class accompaniment for animation namely- newanimation ADDED! */ +.newclass{ +animation-name: newanimation; +} + + @keyframes run { 0%{ background-image: url('../img/OP1.jpg'); @@ -131,3 +137,21 @@ animation-timing-function: linear; background-size : 254px auto; } } + +@keyframes newanimation { + 0% {background-color:red; left:0px; top:0px;} + 25% {background-color:yellow; left:200px; top:0px;} + 50% {background-color:blue; left:200px; top:200px;} + 75% {background-color:green; left:0px; top:200px;} + 100% {background-color:red; left:0px; top:0px;} +} + +/* The element to apply the animation to */ +div { + width: 100px; + height: 100px; + position: relative; + background-color: red; + animation-name: example; + animation-duration: 4s; +}