css----动画

最新推荐文章于 2024-08-09 18:43:30 发布

哈卡尔

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量1k

点赞数 8

分类专栏： css的动态实现和元素变化文章标签： css 前端

本文链接：https://blog.csdn.net/chyb918/article/details/138918986

版权

css的动态实现和元素变化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.动画的创建

在css中要使用动画，必须先创建一个预设的动画，规定动画帧的内容。动画播放时，会按照所有设定的关键帧，按顺序播放并且有过渡效果。

@keyframes 动画名字 { 动画帧内容 }

说明：使用@keyframes 关键字，声明一个动画并取名。然后设定0% - 100%或者from{ 初始样式 } to{ 结尾样式 }`的动画帧过程的css样式。（一般用百分比的形式会使动画过度更加准确和顺畅）

eg：

声明一个旋转的动画

（1）使用百分比，精确设定每个阶段的样式

@keyframes rolling{
    /* 第一帧 */
    0%{
        width: 100px;
        height: 100px;
        background-color:#123456;
        transform:rotate(0deg);
    }

    /* 中间帧省略 */

    /* 最后一帧 */
    100%{
        width: 200px;
        height: 200px;
        background-color:#654321;
        transform:rotate(360deg);
    }
}

其中中间帧可加入对应的百分比进行过度

（2）使用 from to ，快速设置开始到结束的样式

@keyframes rolling{
    /* 第一帧 */
    from{
        width: 100px;
        height: 100px;
        background-color:#123456;
        transform:rotate(0deg);
    }
    /* 最后一帧*/
    to{
        width: 200px;
        height: 200px;
        background-color:#654321;
        transform:rotate(360deg);
    }
}

2.动画的使用

对应的样式

animation-name：要使用的动画的名字

animation-duration：指定的动画的周期时长（单位：s）

animation-delay：指定的动画延时多久开始（单位：s）

animation-timing-function：指定动画的速率曲线

ease（默认值）	缓慢
ease-in	慢入
ease-out	慢出
ease-in-out	慢出慢入
linear	线性（较复杂）

animation-iteration-count：指定动画的播放次数

直接使用数字

infinite（无限）

animation-direction：指定的动画的播放方向

normal（默认值）	正向运行动画
reverse	反向运行动画
alternate	动画交替反向运行
alternate-reverse	反向交替，反向开始交替

*animation

快速简写，一次性配置上述所用动画属性

语法顺序：animation：name duration timing-function delay iteration-count direction：

eg：

旋转和位移动画

<style>
    div{
        width:50px;
        height:50px;
        background-color:#123123;
    }
    /* 分部设置 */
    .animate-detail{
        animate-name: rolling;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    /* 简写设置 */
    .animate-easy{
        animation: rolling 3s ease-in-out 0 infinite alternate;
    }
    
    @keyframes rolling{
        
        from{
            width: 100px;
            height: 100px;
            background-color:#123456;
            transform:rotate(0deg);
        }
        
        to{
            width: 200px;
            height: 200px;
            background-color:#654321;
            transform:rotate(360deg);
        }
    }
</style>
<body>
    <div class="animate-detail"></div>
    <div class="animate-easy"></div>
</body>

效果如下：