简述CSS3实现动画的方式

csdn_Levy

于 2024-10-04 12:10:23 发布

阅读量382

点赞数 10

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

本文链接：https://blog.youkuaiyun.com/csdn_Levy/article/details/142701767

版权

42 篇文章

订阅专栏

在CSS3中，主要有两种方式可以实现动画：transition 和 animation。

Transition：过渡是元素从一种CSS样式逐渐改变为另一种的效果。过渡可以为任何元素的任何属性添加效果。你只需要指定你想要添加效果的CSS属性，过渡效果的持续时间，以及时间函数。例如：
```
div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 200px;
}
```
在这个例子中，当你的鼠标悬停在<div>元素上时，它的宽度会在2秒内从100px变为200px。
Animation：与transition不同，animation可以在多个关键帧之间更改CSS样式，从而创建更复杂的动画效果。你需要定义关键帧（使用@keyframes规则），以及动画的名称、持续时间、时间函数等。例如：
```
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
}
```
在这个例子中，<div>元素的背景色会在4秒内从红色变为黄色，然后变为蓝色。

这就是在CSS3中实现动画的两种主要方法。