12-animation动画

最新推荐文章于 2024-04-08 08:59:02 发布

℡☞

最新推荐文章于 2024-04-08 08:59:02 发布

阅读量94

点赞数 1

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/qq_43975332/article/details/119797043

版权

HTML与CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1 过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点

过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

2 动画的元素

（1）animation-name 动画名称

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

div{
    animation-name: leftToRight;
}
/* 新建动画的关键帧 */
@keyframes leftToRight {
    from{
        margin-left: 0;
    }
    to{
        margin-left: 500px;
    }
}

（2）animation-duration 执行时间

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

默认值为 0，意味着没有动画效果。

（3）animation-timing-function 周期函数

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

（4）animation-delay 延迟时间

设置动画在启动前的延迟间隔。

定义动画开始前等待的时间，以秒或毫秒计。默认值为0

（5）animation-iteration-count 播放次数

定义动画的播放次数。告诉系统动画需要执行几次

n 一个数字，定义应该播放多少次动画
infinite 无限次往返执行

（6）animation-direction 动画执行方向

指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行

（7）animation-fill-mode 动画结束状态

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

（8）animation-play-state 动画是否暂停

告诉系统当前动画是否需要暂停

running: 执行动画
paused: 暂停动画

animation 连写

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
/*可简写为*/
animation:动画名称 动画时长;

3 transform 2D转换

（1）旋转 rotate

/*其中deg是单位, 代表多少度*/
transform: rotate(45deg);

（2）平移 translate

transform: translate(100px, 0px);
/*第一个参数:水平方向;第二个参数:垂直方向*/

（3）缩放 scale

/*水平和垂直都放大1.5倍*/
transform: scale(1.5);
/*第一个参数:水平方向;第二个参数:垂直方向*/
/*水平方向不变，垂直方向缩小0.5倍*/
transform: scale(1, 0.5);

连写

/*transform:旋转 平移 缩放*/
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

呼吸灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg{
            width: 500px;
            height: 500px;
            background-color: gray;
            margin: 50px auto;
            position: relative;
        }
        .bg .smallCircle{
            position: absolute;
            width: 300px;
            height: 300px;
            border: 20px solid white;
            /* 使用绝对定位实现水平垂直居中 */
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            /* 切换盒模型 */
            box-sizing: border-box;
            border-radius: 50%;
            /* 设置动画 */
            animation: circle 5s ease-in-out infinite;
        }
        .bg .bigCircle{
            position: absolute;
            width: 400px;
            height: 400px;
            border: 5px solid white;
            /* 使用绝对定位实现水平垂直居中 */
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -200px;
            /* 切换盒模型 */
            box-sizing: border-box;
            border-radius: 50%;
            /* 设置动画 */
            animation: circle 5s ease-in-out infinite;
        }
        /* 定义动画 */
        @keyframes circle {
            0%{
                border-color: white;
                /* 改变形状大小 transform */
                transform: scale(0.6);
            }
            25%{
                border-color: pink;
                transform: scale(0.7);
            }
            50%{
                border-color: blue;
                transform: scale(0.8);
            }
            75%{
                border-color: purple;
                transform: scale(0.9);
            }
            100%{
                border-color: orangered;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="smallCircle"></div>
        <div class="bigCircle"></div>
    </div>
</body>
</html>

在这里插入图片描述

℡☞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-animation动画

1 过渡和动画之间的异同1.1不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画1.2相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果2 动画的元素（1）animation-name 动画名称指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画div{ animation-name: leftToRight;}/* 新建动画的关
复制链接

扫一扫

专栏目录