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

This article introduces the relevant knowledge of "how to achieve the transition effect of html5 animation". 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. Animation transition attribute transition

1. Function definition of transition

The function of transition makes the attribute value of css transition smoothly in a certain period of time. This effect can be triggered by a mouse click, scratch, focus, or any change to the element, and gracefully change the attribute value of the CSS with an animated effect.

2. Transition definable attributes

Transition-property: set which properties to transition transition-duration: the time to complete the transition animation, the default is 0. Transition-timing-function: sets the ease effect of the animation. The default is ease (gradually slowing down). Other common values: ease-in, acceleration; ease-out, deceleration; ease-in-otlt, acceleration and then deceleration. Transition-delay: sets the delay time for the start of animation. The default is 0.

3. Code example

Transition- example-Ruo.L

.box {

Width: 100px

Height:100px

Margin:50px auto

Background-color:#f00

Transition:all 1s

}

.box: hover {

Width:200px

Height:200px

Border-radius:50%

Background-color:#666

Transition:all 1s ease-in 1s

}

2. Animation effect attribute animation

1. Animation definition

"Keyframe" (@ keyframes), whose style rules are made up of multiple percentages, such as "0%" to "100%", adding different attributes to each percentage, so that the element has an ever-changing effect. The syntax rules are as follows: @ keyframes animation name {0% {element state} 100% {element state}}

2. Animation attribute

The name of the animation-name:@keyframes animation animation-duration: the time it takes for the animation to complete a cycle. The default is 0. Animation-timing-function: the speed curve of the animation (ease effect). The default is "ease". Animation-delay: the delay time for the start of the animation. The default is 0. Animation-iteration-count: the number of times the animation is played. The default is 1. Animation-direction: whether the animation is played in reverse in the next cycle. The default is "normal". Animation-play-state: whether the animation is running or paused. Default is "running". Animation-fill-mode: the state outside the animation time of the object.

3. Code example

Animation- example-Ruo.L

.box {

Width: 100px

Height:100px

Margin:50px auto

Background-color:#f00

}

.box: hover {

-webkit-animation:hover 1s ease-in infinite

}

@-webkit-keyframes hover {

0% {width:100px;height:100px;border-radius:40%;}

50% {width:200px;height:200px;border-radius:60%;}

100% {width:100px;height:100px;border-radius:40%;}

}

This is the end of "how to achieve the transition effect of html5 Animation". Thank you for your 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.