欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css3动画学习之animation

程序员文章站 2022-03-09 20:09:08
...

css3动画学习之animation

 预览地址   点击预览

常用属性说明

  1. animation-name   自定义的名字 比如 animation-name:test  则需要你这样定义test的样式 @keyframes test{动画样式}

  2. animation-duration   多久执行完

  3. animation-iteration-count 动画执行的次数

  4. animation-timing-function 速度曲线

  5. animation-play-state 动画状态

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>

 

上一篇： JAVA#Collections工具类'学习札记

下一篇： 学习博客：Collections集合工具类

推荐阅读