CSS3之动画

最新推荐文章于 2024-04-16 00:12:34 发布

忧郁火龙果

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量77

点赞数

分类专栏： CSS笔记文章标签： css3 动画 css

本文链接：https://blog.csdn.net/lqlove1/article/details/128388488

版权

CSS笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、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(0，0);
        }
        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

忧郁火龙果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3之动画

【代码】CSS3之动画。
复制链接

扫一扫

专栏目录