CSS第十天学习总结—— CSS3 动画

最新推荐文章于 2022-12-27 22:51:00 发布

李穩钰

最新推荐文章于 2022-12-27 22:51:00 发布

阅读量225

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119278458

版权

动画 animation

动画（animation）是CSS3中具有颠覆性的特征之一，
可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
初学者容易对动画和过渡傻傻分不清楚
过渡只能看到一次变化过程如 宽度 1000px 变化到 100px
动画可以设置变化的次数甚至是无数次

在这里插入图片描述

步骤

制作动画分为两步：

在css中定义动画函数 @keyframes：关键帧
给目标元素调用动画函数

在这里插入图片描述

示例代码：

<!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>Document</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        
        /* 1. 声明动画函数 */
        /* keyframes关键帧，理解，定义动画就是定义动画过程中的几个关键帧，然后根据关键帧依次变化*/
        @keyframes move {
     
            /* 开始状态 */
            0% {
     
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
     
                transform: translateX(1000px);
            }
        }
        
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

动画序列：

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

总结：

keyframes：关键帧，理解，定义动画就是定义动画过程中的几个关键帧，然后根据关键帧依次变化。

语法

动画常用属性：

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了`animation-play-state`属性
animation-name	规定@keyframes动画的名称。（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是“running”，还有“paused”
animation-fill-mode	规定动画结束后状态，保持forwards，回到起始backwards

动画名称

animation-name:xxx; 设置要使用的动画名。

持续时间

animation-duration: 0; 设置动画播放的持续时间，默认是0s

速度曲线

animation-timing-function:linear; 规定动画的速度曲线，默认是“ease”。

值	描述

最低0.47元/天解锁文章

李穩钰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS第十天学习总结—— CSS3 动画

动画 animation动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。初学者容易对动画和过渡傻傻分不清楚过渡只能看到一次变化过程如宽度 1000px 变化到 100px动画可以设置变化的次数甚至是无数次步骤制作动画分为两步：在css中定义动画函数 @keyframes：关键帧给
复制链接

扫一扫