欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css动画

程序员文章站 2022-01-28 21:53:11
...

一、transition动画

1：transition-property:指的是需要变化的属性,

          （1）：属性值可以是一个或者多个

          （2）：all（所有发生变化的属性）

2：transition-duration：执行动画时长

3：transition-timing-function: linear(匀速);动画执行方式

             linear：线性，匀速

              ease：慢开始快进程慢结束（慢快慢）

          ease-in：已慢开始

        ease-out：已慢结束

    ease-in-out：即慢要快结束（不常用）

4：transition-delay:延迟时间

简写方式：transition：变化属性    动画时长   æ‰§è¡Œæ–¹å¼    延迟时间

<!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>transition</title>
    <style>
        .transition {
            width: 100px;
            height: 100px;
            background: red;
            transition:all 2s linear;
        }
        .transition:hover{
           margin: 100px;
        }
    </style>
</head>

<body>
    <div class="transition"></div>
</body>

</html>

二、animation:动画

1：animation-name:名称 @keyframes后面所对应的名称

2：animation-duration:动画时长

3：animation-timing-function:执行方式

             linear：匀速

             ease ：以慢开始,以慢结束

          ease-in：以慢开始

        ease-out：以慢结束

    ease-in-out：即慢要快结束（不常用)

4：animation-delay：延迟时间

5：animation-iteration-count：动画重复次数

a：属性值可以直接是数字

b：infinite：无限次循环

6：animation-direction 动画循环执行方式

a： alternate 来回执行

b：normal 默认方式

简写方式：animation：name    动画时长   åŠ¨ç”»æ‰§è¡Œæ–¹å¼    延迟时间    次数    循环方式

@keyframes:定制变化(属性)

方式一：

from:原始样式

to:改变后样式

方式二：百分比

eg：0%{} 50%{} 100%{}

<!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>amination </title>
    <style>
    
        .amination {
            width: 100px;
            height: 100px;
            background: red;
            animation: auto 5s linear infinite alternate;
        }

        @keyframes auto {
            0% {
                width: 200px;
            }

            10% {
                width: 300px;
            }

            20% {
                width: 400px;

            }
        }

      
    </style>
</head>

<body>
    <div class="amination"></div>
</body>

</html>

 

* transition 需要事件才能触发    触发执行(不能设置循环次数)

* animation 可以立即执行动画  可以设置循环次数

上一篇： python 基础 网络爬虫 day03

下一篇： Android 动画总结

推荐阅读