Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to realize the transition and animation of CSS style changes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Transition

Elements gradually change from one style to another.

Div {transition: width 1s;-moz-transition: width 1s; / * Firefox 4 * /-webkit-transition: width 1s; / * Safari and Chrome * /-o-transition: width 1s / * Opera * /} transition-property: the name of the Css attribute to which the transition is applied, such as width width transition-duration: the time it takes for the transition effect, such as 1s transition-timing-function: the time curve of the transition effect is as follows: linear uniform speed ease first slow then fast ease-in slow start ease-out slow end ease-in-out slow start and end cubic-bezier (nMagne n) defines its own values in the cubic-bezie function The possible value is a numeric value between 0 and 1: when the transition effect begins, such as 1s

two。 Animated Animation

1)。 First define the @ keyframes rule

@ keyframes my {from {background: red;} to {background: yellow;} @-moz-keyframes my / * Firefox * / {from {background: red;} to {background: yellow;}} @-webkit-keyframes my / * Safari and Chrome * / {from {background: red;} to {background: yellow;} @-o-keyframes my / * Opera * / {from {background: red;} to {background: yellow;}}

To enrich the process of element change, you can change the from to to a percentage:

@ keyframes my {0% {background: red;} 25% {background: yellow;} 50% {background: green;}} @-moz-keyframes my / * Firefox * / {0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} @-webkit-keyframes my / * Safari and Chrome * / {0% {background: red;} 25% {background: yellow } 50% {background: blue;} 100% {background: green;} @-o-keyframes my / * Opera * / {0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}}

Once defined, then we can start our animation.

2) .animation starts the animation effect

Div {animation-name: my; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; / * Firefox: * /-moz-animation-name: my;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate -moz-animation-play-state: running; / * Safari and Chrome: * /-webkit-animation-name: my;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running; / * Opera: * /-o-animation-name: my;-o-animation-duration: 5s -o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running } the name of the keyframes of the animation-name selector the time spent by the animation-duration animation animation-timing-function plays the animation at a uniform speed how long the animation starts the animation-iteration-count plays the animation number of times animation-direction plays the animation in the next cycle whether the normal plays normally the alternate plays the animation-play in turn -state pauses animation paused animation pauses running animation is playing animation-fill-mode none does not fill forwards when the animation is completed Keep the last property value backwards for a period of time specified by animation-delay, before the animation is displayed, the application start property value both forward and backward fill modes are applied. " CSS style changes how to achieve the transition and animation "content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.