Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<title> Animation </title>
<style>
H3{margin:0 auto;width:100px;}
. loading-demo{height:60px; width:60px;margin:20px auto;position:relative;}
. Act1,.act2{height:100%;width:100%;border-radius:50%;background: #26c1ce;p osition:absolute;top:0;left:0;
-webkit-animation:loading 2s infinite ease-in-out;
-moz-animation:loading 2s infinite ease-in-out;
animation:loading 2s infinite ease-in-out;
/* Animation name animation time loop start last slow */
Opacity:. 6;
}
/* Color deepened because of overlapping */
. Act2{-webkit-animation-delay:-1s;}
@-webkit-keyframes loading{
0%,100%{-webkit-transform:scale (0.0)}
50%{-webkit-transform:scale (1.0)}
}
@-moz-keyframes loading{
0%,100%{-webkit-transform:scale (0.0)}
50%{-webkit-transform:scale (1.0)}
}
@keyframes loading{
0%,100%{-webkit-transform:scale (0.0)}
50%{-webkit-transform:scale (1.0)}
}
</style>
<div class= "Loading-demo" >
<div class= "Act1" ></div>
<div class= "Act2" ></div>
</div>
<body>
<!--
Https://github.com/i-akhmadullin/brackets-csscomb
CSS Sorting
@keyframes
Properties: Name percent action
------------------------------------------------------------------------------------
Animation The shorthand properties of all animated properties, except for the Animation-play-state property. Animation
Syntax: animation:name duration timing-function delay iteration-count direction;
Syntax: Animation: Animation name finish when the time is fast when slow animation delay the number of times the play is reversed
------------------------------------------------------------------------------------
ANIMATION-NAME Specifies the name of the @keyframes animation. "KeyFrames"
------------------------------------------------------------------------------------
Animation-duration specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0. "duration"
The Animation-duration property defines the time, in seconds or milliseconds, that the animation will take to complete a cycle.
Specifies the time it takes to complete the animation. The default value is 0, which means there is no animation effect.
------------------------------------------------------------------------------------
animation-timing-function Specifies the speed curve of the animation. The default is "ease". "Timed Activity/Speed curve"
Linear animations are the same speed from beginning to end. Test
Ease default. The animation starts at low speed, then accelerates and slows down before it ends. Test
Ease-in animations start at low speed. Test
Ease-out animation ends at low speed. Test
Ease-in-out animations start and end at low speed. Test
Cubic-bezier (N,n,n,n) is its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1.
------------------------------------------------------------------------------------
Animation-delay Specifies when the animation starts. The default is 0.
The Animation-delay property defines when the animation starts.
Allow negative values, -2s start the animation immediately, but skip 2 seconds to enter the animation.
------------------------------------------------------------------------------------
ANIMATION-ITERATION-COUNT specifies the number of times the animation is played. The default is 1. "Repeat Count/Repeat play"
n defines the number of times the animation plays. 、
Infinite specifies that animations should be played on an unlimited number of times.
----------------------------------------------------------------------------------
Animation-direction Specifies whether the animation will play backwards in the next cycle. The default is "normal". "Reverse Playback"
Normal default value. The animation should play normally. Test
Alternate animations should rotate backwards.
------------------------------------------------------------------------------------
ANIMATION-PLAY-STATE Specifies whether the animation is running or paused. The default is "running". "Playback status"
Paused specifies that the animation is paused. Test
Running specifies that the animation is playing.
------------------------------------------------------------------------------------
ANIMATION-FILL-MODE specifies the state outside the animation time of the object. "Fill mode/after end animation is visible"
None does not change the default behavior.
Forwards when the animation is complete, the last property value (defined in the last Keyframe) is maintained.
Backwards apply the Start attribute value (defined in the first keyframe) for a period of time specified by Animation-delay before the animation is displayed.
Both both forward and backward fill modes are applied.
------------------------------------------------------------------------------------
-
</body>
CSS3 Animated Instances
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
