Home > Article > Daily Programming > How to implement rotation and movement animation effects in CSS3

How to implement rotation and movement animation effects in CSS3

藏色散人Original: 2018-10-19 15:59:038408browse

This article mainly introduces css3 animation to achieve rotation effects.

css is a cascading style sheet, and friends who are learning front-end must be very familiar with it. Well, everyone should know that a cool animation effect can make your website look more sophisticated and enrich the content to attract users.

Now we will introduce to you a simple and interesting animation special effect, which is to achieve the picture rotation effect.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
    <style>
.main{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: red;
    position: relative;
    top: 30px;
    animation: asd 5s;
}
        @keyframes asd {
            0 %{transform: rotate(0deg);}
            25%{transform: rotate(60deg);left: 0px;}
            50%{left:500px;}
            75%{transform: rotate(-520deg);}
            100%{transform: rotate(0deg);left: 0px;}
        }
 </style>
</head>
<body>

<div class="main">
    动画
</div>
</body>
</html>

The effect is as shown below:

How to implement rotation and movement animation effects in CSS3

##Introduction to relevant important attributes in css3:

transform:

The transform attribute indicates applying a 2D or 3D transformation to the element, which can rotate, scale, move or tilt the element.

@keyframes:

With @keyframes rules you can create animations. In other words, @keyframes here are only used to define animations and have no actual meaning.

The implementation principle of css animation is to gradually transform from one css style to another css style.

The time when the change occurs is specified in percentage (or "from" and "to"). (0% is the start time of animation, 100% is the end time of animation.)

As long as you master the principles of CSS animation, it is very easy to achieve most cool effects through pure CSS.

This article is about the specific method of realizing rotation and movement effects in CSS3 animation. It is simple and easy to understand. I hope it will be helpful to friends in need!

More cool CSS3, html5, javascript special effects codes, all in:

javascript special effects collection

If you want to know more about the front-end, you can follow PHP Chinese website

CSS3 video tutorial, CSS video tutorial, Bootstrap tutorial and other related tutorials, welcome everyone to refer to and learn!

The above is the detailed content of How to implement rotation and movement animation effects in CSS3. 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：How to achieve text flashing effect in js? (Pictures + Videos)Next article：How to achieve text flashing effect in js? (Pictures + Videos)

See more

How to implement rotation and movement animation effects in CSS3

Related articles