CSS3 动画总结

最新推荐文章于 2023-08-10 20:14:15 发布

小光~

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： css js animation

本文链接：https://blog.csdn.net/Solitarily/article/details/118121838

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Animation

属性

animation-name：关键帧的名字
animation-duration：执行的时间，默认为0
animation-delay：动画延迟执行的时间，默认为0
animation-iteration-count：动画播放次数，默认为1
animation-derction：动画执行的方向
- normal：向前循环
- reverse：反向运行
- alternate：交替反向运行
- alternate-reverse：反向交替，反向开始交替
animation-timing-function：定义动画执行的快慢
- cubic-bezier(n,n,n,n)：立方贝塞尔曲线
- steps：等距步长划分值域的步长函数
- ease：默认，从低俗开始，加快，在结束前变慢，等于cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linerar：速度相同，等于cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease-in：从低速开始，等于cubic-bezier(0.42, 0.0, 1.0, 1.0)
- ease-out：从低速结束，等于cubic-bezier(0.0, 0.0, 0.58, 1.0)
- ease-in-out：以低俗开始和结束，等于cubic-bezier(0.42, 0.0, 0.58, 1.0)
- step-start：steps(1, start）
- step-end：steps(1, end）
animation-play-state：控制动画运行或暂停
- pause
- running
animation-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标
1. none：不应用任何样式
2. forwards：开始时应用最后一个关键帧的值
3. backwards：开始时应用第一个关键帧的值
4. both：从两个方向应用值

常用省略写法：

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;

文字从左渐出效果

<html>
    <head>
        <style>
            li {
                animation-name: slidein;
                animation-duration: 2s;
                animation-fill-mode: backwards;
            }
            li:nth-child(1) {
                animation-delay: 0;
            }
            li:nth-child(2) {
                animation-delay: 0.5s;
            }
            li:nth-child(3) {
                animation-delay: 1s;
            }
            @keyframes slidein {
                0% {
                    opacity: 0;
                    margin-left: -40px;
                }
                100% {
                    opacity: 1;
                    margin-left: 0px;
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Hello World</li>
            <li>Hello World</li>
            <li>Hello World</li>
        </ul>
    </body>
</html>