css3动画学习之animation

css3动画学习之animation

常用属性说明

animation-name 自定义的名字比如 animation-name:test 则需要你这样定义test的样式 @keyframes test{动画样式}
animation-duration 多久执行完
animation-iteration-count 动画执行的次数
animation-timing-function 速度曲线
animation-play-state 动画状态
animation-direction 播放结束后是否倒放

W3C属性详解点击这里这里传送门

下面上代码可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试动画</title>
</head>
<body>
    <div class="test">测试动画</div>
    <div class="test2">测试动画</div>
</body>

<style>
    .test{
        width: 100px;
        color: black;
        background: sandybrown;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 50%;
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        /* animation:myfirst 5s; */
        animation-name: myfirst;    /*当自定义的名字*/
        animation-duration: 6s;     /*多久执行完*/
        animation-iteration-count:infinite ;    /*是否循环*/
        float: left;
    }

    @keyframes myfirst{
        /* from {margin-left: 1%}
	    to {margin-left: 80%} */
        20%{
            margin-left: 10%;
        }

        40%{
            margin-left: 30%;
        }
        100%{
            margin-left: calc(50% - 100px);
        }
    }

    .test2{
        width: 100px;
        color: black;
        background: sandybrown;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 50%;
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        /* animation:myfirst 5s; */
        float: right;
        animation-name: myfirst2;   
        animation-duration: 6s;
        animation-iteration-count:infinite;
        animation-timing-function:ease;
        /* animation-direction:reverse; */
       
    }
    @keyframes myfirst2{
        /* from {margin-left: 1%}
	    to {margin-left: 80%} */
        20%{
            margin-right: 10%;
        }

        40%{
            margin-right: 30%;
        }
        100%{
            margin-right: calc(50% - 100px); 
        }
    }
</style>

<script>
    window.onload=()=>{
        var s=document.getElementsByClassName("test2")[0];

        setTimeout(() => {
           s.style.animationPlayState = "paused"; 
        }, 12000);
    }
</script>
</html>

越来越好。

发布了114 篇原创文章 · 获赞 67 · 访问量 12万+

私信关注

css3动画学习之animation

猜你喜欢