CSS动画

动画

​ 由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作

-过渡和动画之间的异同

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

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

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

​ 告诉系统我们需要自己创建一个名称叫做animiationName的动画

​ 通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。

​ 关键帧:

 @keyframes animiationName{
​                 keyframes-selector{
​                      css-style;}}
-animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长

​ time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。

-animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度

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

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

​ time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0

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

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

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

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

-animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

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

-animation-play-state 告诉系统当前动画是否需要暂停

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

-动画模块连写格式

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

-动画模块连写格式的简写

​ animation:动画名称 动画时长;

animate.css

https://animate.style/

1.引入animate的cdn或本地animate.css文件

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2.给指定元素加入class"animate__animated <动效名称>"

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

2D转换模块

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

-旋转 rotate

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

-平移 translate

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

-缩放 scale

​ transform: scale(1.5);
​ transform: scale(0.5, 0.5);
​ 第一个参数:水平方向
​ 第二个参数:垂直方向
​ 注意点:
​ 如果取值是1, 代表不变
​ 如果取值大于1, 代表需要放大
​ 如果取值小于1, 代表需要缩小
​ 如果水平和垂直缩放都一样, 那么可以简写为一个参数

-综合转换连写格式

​ transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
​ /*
​ 注意点:
​ 1.如果需要进行多个转换, 那么用空格隔开
​ 2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的,按照旋转之后的角度进行平移
​ */

-形变中心点

​ transform-origin:
​ 第一个参数:水平方向
​ 第二个参数:垂直方向

​ 注意点
​ 取值有三种形式
​ 具体像素
​ /transform-origin: 200px 0px;/
​ 百分比
​ /transform-origin: 50% 50%;/
​ /transform-origin: 0% 0%;/
​ 特殊关键字
​ /transform-origin: center center;/
​ 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

-旋转轴向

​ -默认情况下所有元素都是围绕Z轴进行旋转
​ transform: rotateZ(45deg);
​ 围绕z轴旋转
​ transform: rotateX(45deg);
​ 围绕x轴旋转
​ transform: rotateY(45deg);
​ 围绕y轴旋转
​ -总结:
​ 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

-perspective
属性定义3D元素距视图的距离,以像素计,该属性允许改变3D元素查看3D元素的视图,当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身

​ 1.什么是透视
​ 近大远小
​ 2.注意点
​ 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面


动画案例1
<!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>动画案例</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 2.设置动画 */
            animation: transform 2s linear 0s infinite alternate;
        }

        /* 1.定义动画关键帧 变形 平移 + 旋转 + 缩放 */
        @keyframes transform {

            /* 开始状态 结束状态 过程 */
            /* 开始状态 */
            from {
                /* transfrom 变形 translate 平移 translateX 向X轴平移 rotate 旋转 */
                transform: translateX(0) rotate(0);
                background-color: skyblue;
                border-radius: 0px;
            }

            /* 结束状态 */
            to {
                transform: translateX(200px) rotate(360deg);
                background-color: pink;
                border-radius: 50%;
            }
        }
    </style>
</head>

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

</html>

在这里插入图片描述


动画案例2
<!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>动画案例2</title>
    <style>
        img {
            animation: pound .2s linear 0s infinite alternate;
        }

        /* 扩张 收缩 */
        @keyframes pound {
            from {
                /* 没有动画效果 */
                transform: none;
            }

            to {
                /* scale缩放 */
                transform: scale(1.2);
            }
        }
    </style>
</head>

<body>
    <img width="150px" src="https://img0.baidu.com/it/u=3587366479,4195056249&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686416400&t=b10be76dcb2bfb453d3bb3c2d2c043e5
    " alt="">
</body>

</html>

在这里插入图片描述


2D转换案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        ul>li {
            width: 100px;
            height: 50px;
            background-color: royalblue;
            margin-top: 35px;
        }

        ul>li:first-child {
            /* 平移  transform*/
            transform: translateX(200px) translateY(50px) translateZ(150px);
            /* 水平平移距离 垂直平移距离 */
            transform: translate(50px, 100px);
        }

        ul>li:nth-child(2) {
            /* 旋转 单位deg */
            transform: rotateX(30deg) rotateY(45deg) rotateZ(60deg);
            transform: rotate(45deg);
        }

        ul>li:nth-child(3) {
            /* 缩放 取值>1 放大 取值<1 缩小*/
            transform: scaleX(2) scaleY(0.5) scaleZ(1.5);
            transform: scale(1.5, 1);
        }

        ul>li:last-child {
            transform: translate(100px, 50px) rotate(45deg) scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>translate</li>
        <li>rotate</li>
        <li>initial-scale</li>
        <li>综合</li>
    </ul>
</body>

</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值