Animation processing in the CSS3

Source: Internet
Author: User

Div{width:200px;Height:200px;background:Red;margin:20px Auto;/*-webkit-transition-property:-webkit-border-radius; transition-property:border-radius;*/-webkit-transition-property:width;/*Transitions*/Transition-property:width;-webkit-transition-duration:. 5s;/*the time required to complete the transition*/transition-duration:. 5s;-webkit-transition-timing-function:ease-in;/*transition at a slow start*/transition-timing-function:ease-in;-webkit-transition-delay:. 18s;/*Start-up delay Time*/Transition-delay:. 18s; }Div:hover{transition:all . 28s ease-in. 1s;/*from the square effect, slowly transition to rounded corners*/width:400px; }
/*     transition-property: specifying CSS properties for a staging or dynamic simulation    transition-duration: Specify the time to complete the transition, set    the duration of the transition animation Transition-timing-function: Specify the transition function    transition-delay: Specify the start delay time, Specify the time that an animation begins to execute/    * Transition-timing-function includes the following functions:    ease        default value, speed from fast to slow, gradually slow    linear      constant speed    ease-in gradually     add effect, Accelerating faster and faster    ease-out    fade effect, slowing down faster and slower    ease-in-out first speed up and then slow down *

KeyFrames is called a keyframe starting with "@keyframes"
@keyframes ChangeColor { declared animations can be defined by themselves    0%{        background: red;    } {background:Orange;                  100%{        background: green;    }     }

Div{Animation-iteration-count:Infinite;/*Infinite Loops*/Animation-iteration-count:5;/*used to define the number of times the animation plays*/Animation-name:Move;/*specify a name for the @keyframes animation:*/animation-direction:Alternate;/*set the playback direction of an animation*/animation-play-state:paused;/*the animation does not play when the page loads*/}

Set animation playback direction  Animation-direction
It has two main values: normal, alternate

1, Normal is the default value, if set to normal, the animation of each cycle is to play forward;
2, Another value is alternate, his role is that the animation plays in the first couple of times to play forward, the odd number of times to play in the opposite Direction.

1 <div><span></span></div>2 3 Div{4 width:200px;5 Height:200px;6 Border:1px solid Red;7 margin:20px Auto;8}9 span{Ten Display:Inline-block; one width:20px; a Height:20px; - background:Orange; - Transform:Translatey (90px); the Animation-name:Move; - animation-duration:10s; - animation-timing-function:ease-in; - Animation-delay:. 2s; + Animation-iteration-count:Infinite; - animation-direction:Alternate; +} a  at @keyframes Move{ - 0%{ - Transform:Translatey (90px); -} - 15%{ - Transform:Translate (90px,90px); in} - 30%{ to Transform:Translate (180px,90px); +} - 45%{ the Transform:Translate (90px,90px); *} $ 60%{Panax Notoginseng Transform:Translate (90px,0); -} the 75%{ + Transform:Translate (90px,90px); a} the 90%{ + Transform:Translate (90px,180px); -} $ 100%{ $ Transform:Translate (90px,90px); -} -     }

Animation processing in the CSS3

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.