css动画

最新推荐文章于 2023-08-10 20:14:15 发布

uuai

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量232

点赞数

分类专栏： css 文章标签：动画

本文链接：https://blog.csdn.net/qq_39019768/article/details/83757182

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、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 可以立即执行动画可以设置循环次数

uuai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画

一、transition动画1：transition-property:指的是需要变化的属性, （1）：属性值可以是一个或者多个（2）：all（所有发生变化的属性）2：transition-duration：执行动画时长3：transition-timing-function: linear(匀速);动画执行方式 ...
复制链接

扫一扫