Home  >  Article  >  Web Front-end  >  How to write css up and down movement effect

How to write css up and down movement effect

WBOY
WBOYOriginal
2021-12-07 17:17:243971browse

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)}}".

How to write css up and down movement effect

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:

How to write css up and down movement effect

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn