Home > Article > Web Front-end > How to write css up and down movement effect
How to write css up and down movement effect
- WBOYOriginal
- 2021-12-07 17:17:243926browse
In css, keyframes rules, animation and transform attributes can be used to achieve up and down motion effects. The writing method is "element {animation: name time}@keyframes name {50%{transform: translateY (movement distance)}}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to write the up and down movement of css elements
In css, you can use the animation attribute and @keyframes rules to achieve the animation effect of the element fading. , through the @keyframes rule, you can create animations.
The principle of creating animation is to gradually change one set of CSS styles into another set of styles. You can change this set of CSS styles multiple times during the animation.
Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.
There is also a transform attribute used to set up and down motion.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
50%{transform:translateY(80px);}
}
</style>
</head>
<body>
<img src="1118.02.png" alt="How to write css up and down movement effect" >
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to write css up and down movement effect. For more information, please follow other related articles on the PHP Chinese website!