详解CSS-09-过渡动画

最新推荐文章于 2024-09-03 16:55:20 发布

不要跟我说对不起

最新推荐文章于 2024-09-03 16:55:20 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/u012365780/article/details/116761762

版权

css 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS3中的过渡和动画效果。过渡用于平滑地改变元素的样式，包括基本使用、缓动效果和兼容性；而动画则通过@keyframes定义关键帧，结合animation属性实现复杂动态效果，包括执行次数、方向控制和多关键帧应用。CSS3的这些特性为网页带来更加流畅的视觉体验，减少了JavaScript的负担。

摘要由CSDN通过智能技术生成

文章目录

一、过渡

1. 过渡的基本使用

transition过渡:

transition过渡属性是CSS3的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性:

过渡从IE10开始兼容，移动端兼容良好。
网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡。
优点:动画更细腻，内存开销小。

transition属性基本使用:

transition属性有4个要素
过渡要定义在元素的开始状态上，而不是结束状态上。

哪些属性可以参与过渡:

所有数值类型的属性，都可以参与过渡，比如width、 height、left、top、border-radius、opacity。
背景颜色和文字颜色都可以被过渡。
所有变形(包括2D和3D)都能被过渡。

all:

如果要所有属性都参与过渡，可以写all。

过渡的四个小属性:
在这里插入图片描述

2. 过渡的缓动效果

缓动参数:

transition的第三个参数就是缓动参数，也是变化速度曲线

常用缓动参数:
在这里插入图片描述
贝塞尔曲线:

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数。

二、动画

1. 动画的定义和调用

动画定义：

可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀。

动画的调用：

定义动画之后，就可以使用animation属性调用动画。

动画的执行次数：

第五个参数就是动画的执行次数。
如果想永远执行可以写infinite。

alternate和forwards：

如果想让动画的第2、4、6…(偶数次)自动逆向执行，那么要加上alternate参数即可。
如果想让动画停止在最后结束状态，那么要加上forwards。

多关键帧动画：

        @keyframes changeColor {
            0% {
                background-color: red;
            }

            20% {
                background-color: yellow;
            }

            40% {
                background-color: blue;
            }

            60% {
                background-color: green;
            }

            80% {
                background-color: purple;
            }

            100% {
                background-color: orange;
            }
        }