Animations动画和Transition过渡效果

最新推荐文章于 2023-03-13 14:39:38 发布

北卿瑜

最新推荐文章于 2023-03-13 14:39:38 发布

阅读量710

点赞数

分类专栏： css 文章标签：前端 html css3

本文链接：https://blog.csdn.net/weixin_44358189/article/details/129285428

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS3中的Animations动画和Transition过渡效果，包括动画的各个属性如animation-name、animation-duration，以及transition的相关属性如transition-property和transition-duration。通过实例展示了关键帧的两种书写方式，以及如何实现过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Animations动画

Animations由两部分组成：

css动画的配置，

以及一系列的keyframes（用来描述动画的开始、过程、结束状态）

1、animation-name ：xx （设置关键帧的名称为xx）

2、animation-duration：5s （动画持续时间为5s）

3、animation-timing-function： linear （动画时间曲线也叫做运行速度为匀速）

取值：

linear 匀速

ease （默认）低速开始—>加速—>结束前减速

ease-in 以低速开始

ease-out 以低速结束

ease-in-out 以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4、animation-delay:5s (动画等待5后开始)

5、animatiom-iteration-count：1 （动画播放次数为1次）

取值：

xx数字，定义应该播放xx次动画

infinite-无限次执行

6、animation-direction： alternate（设置动画为反向播放）

取值：

nomal（默认）-执行完一次之后回到起点继续执行下一次

alternate-往返动画，执行完一次之后往回执行下一次

reverse-反向执行

7、animation-fill-mode：（动画结束的最后一帧）

取值：

none-不做任何改变

forwards-让元素结束状态保持动画最后一帧的样式

backwards-让元素等待状态的时候显示动画第一帧的样式

both-等待状态显示第一帧，结束状态保持最后一帧

8、animation-play-state：（设置动画是否暂停）

取值：

running-执行动画

paused-暂停动画

9、简写

animation：动画名称动画时长动画运动速度延迟时间执行次数往返动画

animation：动画名称动画时长（有这两个即可以完成动画，其它未设置，有默认值）

10、关键帧的书写

第一种：from to

@keyframes swipe {

from {

css样式

}

to {

css样式

}

第二种：百分比，可以分多段

@keyframes LeftToRight {

0% {

css样式

}

50% {

css样式

}

100% {

css样式

}

<!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>animation动画</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border-radius: 16px;
            background-color: pink;
            animation: toRight 2s ease .5s infinite alternate forwards;
        }
        .one:hover{
            animation-play-state: paused;
        }
        @keyframes toRight {
            0%{
                margin-left: 0%;
            }
            25%{
                margin-left: 25%;
            }
            50%{
                margin-left: 50%;
            }
            75%{
                margin-left: 75%;
            }
            100%{
                margin-left: 100%;
            }
        }

    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

transition过渡效果

设置元素中参与过渡的属性名称

transition-property：none || all || property

none：表示没有属性参与过渡效果；

all：表示所有属性都参与过渡效果；

property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

设置过渡需要花费的时间（单位为秒或者毫秒）

transition-duration:time

默认值为 0，意味着不会有效果.如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔

设置过渡动画的类型

transition-timing-function: ease-in-out;

linear:以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)

ease:以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)

ease-in:以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)

ease-out:以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)

ease-in-out:以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)

cubic-bezier(n, n, n, n):使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

设置过渡效果何时开始(设置在过渡效果开始之前需要等待的时间，单位为秒或毫秒)

transition-delay: .6s

简写

transition: transition-property transition-duration transition-timing-function transition-delay;

<!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>transition过渡效果</title>
    <style>
        /* transition: transition-property transition-duration transition-timing-function transition-delay; */
        .one{
            width: 100px;
            height: 100px;
            background: paleturquoise;
            border: 2px solid palegoldenrod;
        
            transition-property: width, background;
           
            transition-duration: 1s,.6s;
           
            transition-timing-function: ease-in-out;
            
            transition-delay:.6s
        }
        .one:hover{
            width: 200px;
            background: palevioletred;
        }
        .two{
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background: pink;
            border: 3px solid plum;
            transition: width .5s ease 2s,background-color .8s ease-in 2s,transform 2s;
        }
        .two:hover{
            width: 200px;
            background-color: palegoldenrod;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>