Home > Article > Web Front-end > How to make css animation constant speed
How to make css animation constant speed
- 醉折花枝作酒筹Original
- 2021-07-14 13:34:038194browse
In CSS, you can use the transition-timing-function attribute to set the animation at a constant speed. You only need to add the "transition-timing-function: linear;" style to the element.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
ease:
1. ease: (gradually slows down) default value
2. linear: (constant speed)
3. ease-in: (Accelerate)
4, ease-out: (Decelerate)
5, ease-in-out: (Accelerate and then decelerate)
6, cubic-bezier
For example:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding: 0;}
.icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
.icon_down:hover{ transform: rotate(180deg);}
</style></head><body>
<p class="icon_down"></p></body></html>Rendering: the mouse is rotated 180 degrees,
Example 2:
Put the mouse pointer on the p element, and its width will gradually change from 100px to 300px:
p
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}Rendering:
Mouse After passing
#recommended learning:css video tutorial
The above is the detailed content of How to make css animation constant speed. For more information, please follow other related articles on the PHP Chinese website!