From 9651da064d4b551a3c13469037e018316662cdad Mon Sep 17 00:00:00 2001 From: Micky Date: Sun, 4 Nov 2018 09:36:12 +1100 Subject: [PATCH] Added Keyframes section (#20860) Changed the intro, added a whole keyframe section + example using from/to and values --- .../english/css/using-css-animations/index.md | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) 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`