search

Home  >  Article  >  Web Front-end  >  Summary analysis of css3 animation effects

Summary analysis of css3 animation effects

高洛峰
高洛峰Original
2017-03-22 14:51:262110browse

There are three animation functions of css3:

1. transition (transition attribute)
2. animation (animation attribute)
3. transform (2D/3D conversion attribute)

The following will introduce my understanding one by one:

1. transition:

For example, -webkit-transition:color 1s;

is equivalent to:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

The transition effect of multiple attributes can be written like this:

Method 1:-webkit-transition:

Method 2:

-webkit-transition:

-webkit-transition:

transition-timing-function attribute values ​​have 5 values:

ease: start slowly, end slowly

liner: uniform

ease- in: slow start

ease-out: slow end

ease-in-out: slow start, slow end (slightly different from ease)

Example:
transition transition effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡效果</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        #box{   
            width: 200px;   
            height: 200px;   
            background-color: chocolate;   
            position: relative;   
            left: 0px;   
            top: 0px;   
            transition: top 5s ease,left 5s ease ;   
            -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   
            -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   
            -o-transition: top 5s ease,left 5s ease ; /* Opera */   
        }   
        .btn{   
            width: 512px;   
            margin: 0 auto;   
            border: 2px solid #e3e3e3;   
            border-radius: 5px;   
            padding: 10px;   

        }   
        .btn button{   
            width: 80px;   
            height: 40px;   
            text-align: center;   
            line-height: 40px;   
            margin-right: 20px;   
        }   
        button:last-child{   
            margin-right: 0px;   
        }   
    </style>
    <script>
        window.onload=function(){   
            var e1 = document.getElementById("e1");   
            var e2 = document.getElementById("e2");   
            var e3 = document.getElementById("e3");   
            var e4 = document.getElementById("e4");   
            var e5 = document.getElementById("e5");   
            var box = document.getElementById("box");   
            e1.onclick=function(){   
                box.style.left = 1000+"px";   
                box.style.top = 100+"px";   
                box.style.transitionTimingFunction="ease";   
            };   
            e2.onclick=function(){   
                box.style.right = 0+"px";   
                box.style.top = 0+"px";   
                box.style.transitionTimingFunction="liner";   
            };   
            e3.onclick=function(){   
                box.style.right = 1000+"px";   
                box.style.top = 100+"px";   
                box.style.transitionTimingFunction="ease-in";   
            };   
            e4.onclick=function(){   
                box.style.left = 0+"px";   
                box.style.top = 0+"px";   
                box.style.transitionTimingFunction="ease-out";   
            };   
            e5.onclick=function(){   
                box.style.left = 1000+"px";   
                box.style.top = 100+"px";   
                box.style.transitionTimingFunction="ease-in-out";   
            };   

        }   
    </script>
</head>
<body>
    <p id="box"></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p class="btn">
        <button id="e1">ease</button>
        <button id="e2">liner</button>
        <button id="e3">ease-in</button>
        <button id="e4">ease-out</button>
        <button id="e5">ease-in-out</button>
    </p>
</body>
</html>

2. Animation attribute animation

animation: name duration timing-function delay iteration-count direction;

Value

Description
##animation-name

 #Specifies the keyframe name that needs to be bound to the selector. .

animation-duration

 Specifies the time it takes to complete the animation, in seconds or milliseconds.

animation-timing-function

 Specifies the speed curve of animation.

animation-delay

 Specifies the delay before the animation starts.

animation-iteration-count

 Specifies the number of times the animation should be played.

animation-direction

 Specifies whether the animation should be played in reverse in turn.

Note: Internet Explorer 9 and earlier does not support the animation property.

@keyframes animationname {keyframes-selector {css-styles;}}

##animationnamekeyframes-selector
##value

 Description

Required. Defines the name of the animation.

Required. The percentage of animation duration. 		Legal values:

##0-100%

  • ##from (same as 0%)

  • to (same as 100%)

##css-styles

Required. One or more legal CSS style properties.

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

例如：

　　animation:mymove 5s infinite;   

　　@keyframes mymove{   

　　　　from{ top:0px; }   

　　　　to{ top:200px; }   

　　}

还可以这么写：

　　@keyframes mymove{   

　　　　0%{ top:0px; }   

　　　　25%{ top:200px; }   

　　　　50%{ top:100px; }   

　　　　75%{ top:200px; }   

　　　　100%{ top:0px; }   

　　}

 案例：
css3的animation效果

<!DOCTYPE html>
<html>
<head>
<style>
p   
{   
width:100px;   
height:100px;   
background:red;   
position:relative;   
animation:mymove 5s infinite;   
-moz-animation:mymove 5s infinite; /* Firefox */   
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */   
-o-animation:mymove 5s infinite; /* Opera */   
}   

@keyframes mymove   
{   
from {top:0px;}   
to {top:200px;}   
}   

@-moz-keyframes mymove /* Firefox */   
{   
from {top:0px;}   
to {top:200px;}   
}   

@-webkit-keyframes mymove /* Safari and Chrome */   
{   
from {top:0px;}   
to {top:200px;}   
}   

@-o-keyframes mymove /* Opera */   
{   
from {top:0px;}   
to {top:200px;}   
}   
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<p></p>

</body>
</html>

3、设置3D场景（即transform）

-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。

-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。) 　　Summary analysis of css3 animation effects

使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)

(1)、translate(移动距离)

　　　　translateX（x px）

　　　　translateY（y px）

　　　　translateZ（z px）

(2)、rotate(旋转角度)

　　　　rotateX(x deg)

　　　　rotateY(y deg)

　　　　rotateZ(z deg)

 　　Summary analysis of css3 animation effects

transform：rotate（45deg）

rotateX:向屏幕上边沿向内旋转为正方向。

rotateY:向屏幕竖直向下为正方向。

rotateZ:向屏幕外为正方向。

一个p块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY（45deg）。

实例：

transform3D转换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D转换效果</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        #box{   
            width: 200px;   
            height: 200px;   
            background-color: chocolate;   
            position: relative;   
            left: 0px;   
            top: 0px;   
            perspective:800px;   
            perspective-origin:50% 50%;   
            transform-style: preserve-3d;   
            transform-origin:0% 100%;//以Y轴为旋转中心   
        }   
        p{   
            margin:20px 520px;   
        }   
        .btn{   
            width: 300px;   
            margin: 0 auto;   
            border: 2px solid #e3e3e3;   
            border-radius: 5px;   
            padding: 10px;   

        }   
        .btn button{   
            width: 80px;   
            height: 40px;   
            text-align: center;   
            line-height: 40px;   
            margin-right: 20px;   
        }   
        button:last-child{   
            margin-right: 0px;   
        }   
    </style>
    <script>
        window.onload=function(){   
            var tx = document.getElementById("tx");   
            var ty = document.getElementById("ty");   
            var tz = document.getElementById("tz");   
            var rx = document.getElementById("rx");   
            var ry = document.getElementById("ry");   
            var rz = document.getElementById("rz");   
            var box = document.getElementById("box");   
            tx.onclick=function(){   
                box.style.transform = "translateX(500px)";   
            };   
            ty.onclick=function(){   
                box.style.transform = "translateY(400px)"
            };   
            rx.onclick=function(){   
                box.style.transform = "rotateX(30deg)"
            };   
            ry.onclick=function(){   
                box.style.transform = "rotateY(30deg)"
            };   
            rz.onclick=function(){   
                box.style.transform = "rotateZ(30deg)"
            };   
        }   
    </script>
</head>
<body>
    <p id="box"></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>translate(移动距离)</p>
    <p class="btn">
        <button id="tx">translateX</button>
        <button id="ty">translateY</button>
    </p>
    <p>rotate(旋转角度)</p>
    <p class="btn">
        <button id="rx">rotateX</button>
        <button id="ry">rotateY</button>
        <button id="rz">rotateZ</button>
    </p>
</body>
</html>

使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。

这个旋转中心是可以改变的：

　　　　X轴：left、center、right.

　　　　Y轴：top、center、bottom.

　　　　Z轴：length px(一个长度值)。

以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多Summary analysis of css3 animation effects相关文章请关注PHP中文网！

相关文章：

如何用HTML5的Canvas制作3D动画效果

HTML5 Canvas动画效果图文代码演示

CSS3动画实现5种预载动画效果
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：Flexbox creates CSS layout to achieve horizontal and vertical centering example analysisNext article：Flexbox creates CSS layout to achieve horizontal and vertical centering example analysis

Related articles

See more