动画(CSS3)

最新推荐文章于 2023-05-04 18:09:23 发布

小-茶

最新推荐文章于 2023-05-04 18:09:23 发布

阅读量104

点赞数

分类专栏： CSS 文章标签： CSS CSS3 animation

本文链接：https://blog.csdn.net/weixin_43719948/article/details/103107266

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。*

语法格式：
animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;
注：
动画名称是自定义的；
一般只写前两个属性值：动画名称动画时间；
运动曲线：ease默认；
播放次数：有animation-iteration-count:infinite;无限循环；
animation-direction:normal / reverse反向 / alternate正反方向交替进行;
animation-play-state:paused; 暂停动画
定义动画：

@keyframes 动画名称{
            from{开始位置}//0%
            to{结束位置}//100%
        }

多组动画：百分比任意设置
eg.小汽车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>car</title>
    <style>
        img{
            animation: car 5s infinite;
            margin:100px auto;
        }
        @keyframes car {
            0%{
                transform: translate3d(0,0,0);
            }
            50%{
                transform: translate3d(1000px,0,0);
            }
            51%{
                transform: translate3d(1000px,0,0) rotateY(180deg);
            }
            100%{
                transform: translate3d(0,0,0) rotateY(180deg);
            }
        }
        
    </style>
</head>
<body>
<img src="images/car.jpg" width="200"/>
</body>
</html>

原图小汽车
在这里插入图片描述

没有GIF QAQ
如果有多组变形都属于transform，用空格隔开即可。