CSS3之动画

文章目录

    • 一、CSS3动画的基本使用
    • 二、CSS3动画序列
    • 三、动画的常用属性

一、CSS3动画的基本使用

<style>
    @keyframes move{
        0%{
            transform: translateX(0px);
        }
        100%{
            transform: translateX(300px);
        }
    }
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        animation-name: move;
        animation-duration: 3s;
    }
</style>
<body>
    <div>1</div>
</body>

二、CSS3动画序列


 - 0%是动画的开始。100%是动画的结束,这样的规则就是动画序列
 - 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
 - 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
 - 请使用百分比来规定变化发生的时间,或者用关键词“from”和“to”,等同于0%100%

三、动画的常用属性

<style>
    /* 1.@keyframes关键帧 */
    @keyframes move{
        0%{
            transform: translate(00);
        }
        100%{
            transform: translate(1000px,0);
        }
    }
    div{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    /* 2.使用的动画名称 */
        animation-name: move;
    /* 3.动画的花费的周期时间 duration(期间)*/
        animation-duration: 1s;
    /* 4.规定动画的速度曲线默认是(缓慢移动)*/
        animation-timing-function: ease;
    /* 5.规定动画何时开始默认0s*/
        animation-delay: 0s;
    /* 6.规定动画呗播放的次数,iteration(迭代)默认是1,infinite(无限的)*/
        animation-iteration-count: infinite;
    /* 7.规定动画是否在下一周期逆向播放,direction(动向)默认是“normal(正常的)”  alternate(交替的)*/
        animation-direction: alternate;
    /* 8.规定动画结束后状态,是否回到原位backwards(向后),或者保持forwards(向前)结束位置*/
        animation-fill-mode: forwards;
    }
    div:hover{
    /* 9.规定动画是否正在运行或暂停,默认是runnig还有paused*/
        animation-play-state: paused;
    }
</style>
<body>
    <div>1</div>
</body>

动画的简写形式:

animation:动画名称(move) 持续时间(2s) 运动曲线(linear) 何时开始(1s) 播放次数(infinite) 是否反方向(alternate) 动画起始或者结束状态

总结:

  • 简写属性里不包括animation-play-state
  • 暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
  • 想要动画走过来,而不是直接调回来:animation-directioni:alternate
  • 盒子动画结束后,暂停在结束位置:animation-fill-mode:forwards

你可能感兴趣的:(CSS笔记,css3,动画,css)