In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.