CSS过渡与动画：过渡效果、动画属性、关键帧动画

翻滚的胖子
2023-06-04 23:40:30
HTML CSS JavaScript

CSS过渡与动画是Web开发中常用的技术之一，它能够让网页元素呈现出更加生动、有趣的效果，提升用户体验。本文将为大家详细介绍CSS过渡与动画的基本概念、过渡效果、动画属性和关键帧动画的用法，同时提供了易于理解的代码案例。

CSS过渡

过渡是指在某些属性值改变时，元素从一种样式逐渐变为另一种样式的效果。可以使用CSS transition来实现过渡效果。下面是一个简单的例子：

/* HTML */<div class="box"></div>/* CSS */.box {  width: 100px;  height: 100px;  background-color: red;  transition: background-color 1s;} .box:hover {  background-color: blue;}

上面的代码实现了当鼠标悬浮在box元素上时，它的背景色会从红色逐渐变为蓝色。在CSS代码中，过渡效果通过transition属性来设置，它指定了哪些属性应该过渡、过渡持续时间、过渡的速度曲线等。

CSS动画属性

CSS动画属性是一组用于控制CSS动画的属性，包括animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。

下面是一个使用CSS动画属性的例子：

/* HTML */<div class="box"></div>/* CSS */.box {  width: 100px;  height: 100px;  background-color: red;  animation: myanimation 2s infinite;}@keyframes myanimation {  0% { background-color: red; }  50% { background-color: blue; }  100% { background-color: green; }}

上面的代码定义了一个名为myanimation的动画，它会使box元素从红色逐渐变为蓝色，最后变为绿色。动画的持续时间为2秒，循环播放。在CSS代码中，动画通过animation属性来设置，它指定了动画名称、动画持续时间、动画播放次数等。

关键帧动画

关键帧动画是一种更加灵活、更加复杂的动画方式，可以通过设置关键帧来控制动画的每一帧的样式。关键帧动画通过@keyframes关键字来定义。

下面是一个使用关键帧动画的例子：

/* HTML */<div class="box"></div>/* CSS */.box {  width: 100px;  height: 100px;  background-color: red;  animation: myanimation 2s infinite;}@keyframes myanimation {  0% { background-color: red; }  50% { background-color: blue; }  100% { background-color: green; }}

上面的代码定义了一个名为myanimation的关键帧动画，它会使box元素从红色逐渐变为蓝色，最后变为绿色。动画的持续时间为2秒，循环播放。