动画效果：animation

最新推荐文章于 2024-07-24 21:35:56 发布

你想要那颗糖

最新推荐文章于 2024-07-24 21:35:56 发布

阅读量883

点赞数 1

分类专栏： HTML+CSS 文章标签：动画 android css3

本文链接：https://blog.csdn.net/qq_50260510/article/details/129493534

版权

HTML+CSS 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

1.原理： 实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

2.语法：

（1）调用动画 animation:动画名动画执行时间；

（2）@keyframes 动画名字(不要用中文)；

（3）开始状态from 如果是原点取值为0,是可以省略的，结束状态to；（0% 相当于from，100% 相当于to）；

3.注意：

（1）infinite循环次数和方向alternate一般搭配使用；

（2）infinite循环次数,alterna反向执行无法和结束状态一起使用；

（3）动画可以定义多个,多个动画可以同时使用,记得使用逗号隔开。

（4）动画名称和动画时长必须赋值；

（5）调用动画的取值不分先后顺序；

（6）如果有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>动画的多个状态</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
             /* 调用动画属性   动画名称,花费时间,匀速播放(linear),延迟播放(单位是s),循环次数(infinite无限循环) */
            animation: move 5s linear 2s infinite;
        }
        @keyframes move {
            /* 百分比状态越平均,动画效果越匀速 */
            /* 0%相当于from;100%相当于to; */
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(500px,0);
            }
            50%{
                transform: translate(500px,500px);
            }
            75%{
                transform: translate(0,500px);
            }
            100%{
                transform: translate(0,0);
            }
             /* animation: name duration timing-function delay iteration-count direction fill-mode; */

            /* 定格动画的步骤:把要定格的位置设为100%,然后加forwards属性. */

            /* 注意点:
            1.infinite循环次数和方向alternate(反方向执行)属性一起使用;
            animation: move 2s linear 2s infinite;


            2.infinite循环次数和alternate(反方向执行)属性无法和forwards(结束状态)一起使用 
            animation: move 2s forwards;*/

        }
    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

逐帧动画：

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。将动画过程等分成N份。

animation-timing-function: steps(N)；

本节内容注意点：

1.transition 和 animation的区别

1.transition: 属性花费时间速度曲线延时时间; transition: width 2s ease 1s;

2.animation: 动画名称花费时间速度曲线延时时间重复次数动画方向执行完毕的状态;

3.过渡经常配合鼠标经过使用，只能设置起始和结束状态。

4.动画可以自动执行，而且无限循环等。（其中动画名称和花费时间必须要写），里面可以有很多的形态，比如 0%， 10% .... 100%

2.perspective 和 transform-style 区别

1.perspective 是透视，可以让电脑模拟 3d效果，实现近大远小的效果。

2.transform-style 立体呈现可以让子元素里面按照设置位移，旋转，缩放，扭曲等。如果不给父元素这个属性，这里面所有的子盒子都是平面的。

3.正常情况下： 爷爷设置perspective、父亲设置transform-style: preserve-3d、孩子们设置位移，旋转，缩放，扭曲等。

你想要那颗糖

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
动画效果：animation

实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。（1）调用动画 animation:动画名动画执行时间；（2）@keyframes 动画名字(不要用中文)；（3）开始状态from 如果是原点取值为0,是可以省略的，结束状态to；（0% 相当于from，100% 相当于to）；（1）infinite循环次数和方向alternate一般搭配使用；（2）infinite循环次数,alterna反向执行无法和结束状态一起使用；
复制链接

扫一扫

专栏目录