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:038213browse

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.

How to make css animation constant speed

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!

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
Previous article:What can CSS do?Next article:What can CSS do?