css3中的动画了解一下

最新推荐文章于 2024-04-16 00:12:34 发布

小斯不斯

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量206

点赞数

分类专栏： css3中的动画了解一下文章标签： @keyframes animation

本文链接：https://blog.csdn.net/qq_42181069/article/details/80441977

版权

css3中的动画了解一下专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，在文章开头，想把笔记整理给大家看看，不知道大家对css动画的理解怎么样，

如果某个动画有可能执行多次，就可以把这个动画封装起来

* @keyframes anmiatename {0%{} 50%{} 100%{}}

* % 代表的是时间，假如动画执行一次需要1秒，那么50%就代表动画执行到0.5s时的状态， 0% 代表起始位置， 50% 中间位置， 100% 代表结束位置

* 如果某个节点的位置和起始位置一致，这个代码段就可以不写

* 如果要转弯，那么关键节点就是转折点，就添加转折点的百分比，如果不转弯，那关键节点就是终点的位置，就添加结束点的百分比

*封装完动画之后，给需要添加动画的元素一个animation的属性

如果来使用动画

animation: dodo 0.3s infinite 2s forwards;

参数1：动画的名字

参数2：单次动画的执行时间

参数3：动画的执行次数，如果不写，执行一次，如果写10，执行10次， infinite无限次

参数4： 2s延迟2秒执行

参数5：是否保留动画结束时的状态。如果不想保留，就不写

3、接下来给大家展示一个简单的动画：

4、其实代码很简单，运用的就是上面的知识点，也许这就是传说中的毫无技术含量吧......

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }
        
        body {
            background-color: #fff;
        }
        img{
            width: 200px;
            height: 200px;
        }
        .image1 {
            position: absolute;
            bottom: 100px;
            left: 100px;
            transform: translate(0px, 0px);
            
            /* 动画的使用 */
            animation: shake 0.2s 5 0.2s , run 5s 5s infinite;
        }
        .image2{
            
            position: absolute;
            bottom: 400px;
            left: 100px;
            transform: translate(0px, 0px);
            
            /* 动画的使用 */
            animation: run 5s 2s infinite ;
        }
       
        
        /* 动画的封装 */
        @keyframes shake {
            /* 0%, 50%, 100% 代表的是时间， 假如动画执行一次用时1秒钟，那么50%就代表0.5秒的时候 */
            /* 0% {
                transform: translate(0px, 0px);
            } */

            50% {
                transform: translate(0px, 20px);
            }

            /* 100% {
                transform: translate(0px, 0px);
            } */
        }

      
        @keyframes run {
            40% {
                transform: translate(1000px, 0px);
            }

            60% {
                transform: translate(1000px, 0px) rotateY(180deg) ;
            }

            80% {
                transform: translate(0px, 0px) rotateY(180deg) ;
            }
        }

    </style>
</head>
<body>
    <img class="image1" src="./d53f8794a4c27d1e5fb0348410d5ad6edcc438df.gif" alt="">

    <img class="image2"src="./u=4087242791,1543822195&fm=27&gp=0.jpg" alt="">
  
</body>
</html>

<!-- 
    1. 我们可以使用@keyframes来封装一个动画， 需要给动画指定一个名字， 然后在大括号上，写入关键节点的参数
    2. 关键节点，要用 50% {} 这种语法来实现。 注意： 这个百分号代表的时间。 假如动画执行一次需要1秒， 那么50%就代表动画执行到0.5s时的状态
    3. 关键节点：如果动画有转弯，那么关键节点，就是转折点。 如果动不转弯; 如果动画不转弯，那么关键节点，就是终点的位置
    4. 封装完动画之后，给需要添加动画的元素一个 animation的属性， 指定动画的名字， 动画单次执行的时间， 动画执行的次数，动画延迟执行时间， 动画效的果 （后面这三个参数与transition里面的三个参数是一致的）， 如果我们想要保留动画执行完成之后的状态，需要在后面加一个 forwards的属性值。 
 -->

小斯不斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中的动画了解一下

首先，在文章开头，想把笔记整理给大家看看，不知道大家对css动画的理解怎么样，如果某个动画有可能执行多次，就可以把这个动画封装起来 * @keyframes anmiatename {0%{} 50%{} 100%{}} * % 代表的是时间，假如动画执行一次需要1秒，那么50%就代表动画执行到0.5s时的状态， 0% 代表起始位置， 50% 中间位置， 100%...
复制链接

扫一扫