diff --git a/guide/english/css/using-css-animations/index.md b/guide/english/css/using-css-animations/index.md index 605749135e..689fe909b1 100644 --- a/guide/english/css/using-css-animations/index.md +++ b/guide/english/css/using-css-animations/index.md @@ -3,8 +3,30 @@ title: Using CSS Animations --- ## Using CSS Animations -CSS animations add beauty to the Webpages.
-CSS animations make transitions from one CSS style to the other beautiful. +CSS animations change elements from one CSS style to another.
+There are no limits to how many CSS propreties you can change.
+ +## @Keyframes + +CSS animations work by using keyframes, which define what style the element has at any given time. + +```css + +/* Using from/to */ + +@keyframes animationName { + from {opacity: 1;} + to {opacity: 0;} +} + +/* Using Values */ + +@keyframes animationName { + 0% {opacity: 1;} + 50% {opacity: 0;} + 100% {opacity: 1;} +} +``` To create a CSS animation sequence, we have different sub-properties in the `animation` property in CSS : - `animation-delay`