1000字范文 > CSS动画：transition触发动画和animation非触发动画

CSS动画：transition触发动画和animation非触发动画

时间：2022-12-27 13:36:05

♠ 触发型动画♥ transition动画♣ transition的属性♣ 使用方式♣ 使用演示♦ 位置变换♦ 角度变换♦ 缩放变换♦ 颜色变换 ♠ 非触发动画♥ animation动画♣ animation的属性♦ animation-iteration-count类型♦ animation-direction类型♦ animation-play-state类型♦ animation-fill-mode类型♦ animation-timing-function类型♣ 使用方式♦ @keyframes♣ 使用演示♦ 自动旋转♦ 透明闪烁 ♠ 推送♠ 结语

♠ 触发型动画

本章节学习通过transition样式执行一些触发型的动画，比如悬停后的变换等

♥ transition动画

css中我们可以通过transition实现一些动画的效果，下面我们看一下怎么使用

♣ transition的属性

♣ 使用方式

使用方式1

transition :width 0.2s ease-in 1s;

属性+时间+曲线+延迟

使用方式2

transition-property: width;transition-duration: 1s;transition-timing-function: ease-out;transition-delay:1s;

四个属性全部列出来

使用方式3

transition: all 1s ease-in 1s

所有属性都变换，all+时间+曲线+延迟

♣ 使用演示

这一模块我们通过演示示例，来展示transition的用法，首先我们创建一个按钮，在网页中间，代码如下所示

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

♦ 位置变换

通过transform: translate(xx)来设置按钮悬停时候的位置变化

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;}.btn:hover{transform: translate(45px);transition: all 1s ease;}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

♦ 角度变换

通过transform: rotate(xx)来设置按钮悬停时候的位置变化

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;}.btn:hover{transform: rotate(360deg);transition: all 1s ease;}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

♦ 缩放变换

通过transform: scale(xx)来设置按钮悬停时候的大小变化

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;}.btn:hover{transform: scale(0.5);transition: all 1s ease;}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

♦ 颜色变换

通过background-color来设置按钮悬停时候的颜色变化

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;}.btn:hover{background-color: #e54611;transition: all 1s ease;}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

很简单也很实用，css的属性都可以通过transition来变换，宽度、颜色等等的

♠ 非触发动画

我们经常需要组件自动去做一些动画效果，为此我们需要用到animtion动画，animation动画是通过定义特殊字段@keyframes书写的动作结构，再通过animation限定的结构执行的

♥ animation动画

css中我们可以通过animation实现一些自动执行的动画效果，下面我们看一下怎么使用

♣ animation的属性

♦ animation-iteration-count类型

默认：1infinite：无限循环

♦ animation-direction类型

normal：默认，正常

reverse：反向运动

alternate：正反轮播

alternate-reverse：反向播放后，恢复到初始状态

♦ animation-play-state类型

running：默认，正常运行

paused：暂停动画

♦ animation-fill-mode类型

none：默认，执行后恢复到原状态

forwards：执行完保持结束状态

backwards：延时前永远保持动画初始状态

♦ animation-timing-function类型

♣ 使用方式

♦ @keyframes

@keyframes方式1

@keyframes test1{from{transform: rotate(60deg)}to{transform: rotate(360deg)}}

关键字@keyframes+动画名

对象from下写css的属性，意味初始状态

对象to下写css的属性，意味结束状态

@keyframes方式2

@keyframes test2{0% {transform: rotate(60deg)}50% {transform: rotate(160deg)}100% {transform: rotate(260deg)}}

关键字@keyframes+动画名

百分数指动画的执行进度，50%在动画执行一半时达到的状态

@keyframes方式3

@keyframes test3{0% {transform: rotate(60deg)}50% {transform: rotate(160deg)}to{transform: rotate(360deg)}}

方式1和方式2可以混用

animation执行方式1

animation-name: test1;animation-duration: 2s;animation-dela：1s;animation-iteration-count: infinite;

animation属性字段+参数

animation执行方式2

animation: test1 2s 1s infinite;

animation:参数

♣ 使用演示

以下我们通过代码和演示制作几个可以自动执行的动画

♦ 自动旋转

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;animation: test 2s infinite;}@keyframes test{0% {transform: rotate(0deg)}50% {transform: rotate(160deg)}100% {transform: rotate(360deg)}}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>

♦ 透明闪烁

<!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>Document</title><style>.btn{width: 200px;height: 40px;background-color: #4dccc6;margin-top: 20%;margin-left: 45%;animation: test 1s infinite;}@keyframes test{0% {opacity:0;}50% {opacity:1;}100% {opacity:0;}}</style></head><body><div><button class="btn">测试按钮</button></div></body></html>