目录
一、介绍
CSS3 @keyframes 规则
1.概念
2.好处
3.特点
4.用法
二、使用
1.定义关键帧(Keyframes):
2.应用动画:
3.可选的动画控制属性:
4.实现动画效果的优化:
三、动画属性
四、实例说明
五、总结
一、介绍
CSS3 @keyframes 规则
要创建 CSS3 动画,你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
1.概念
CSS动画是指通过CSS样式表中的属性和关键帧来控制元素的外观或位置,从而创建动态效果。它基于关键帧(keyframes)的概念,其中定义了元素在动画过程中的不同状态。
2.好处
- 性能优化: CSS动画通常比JavaScript动画更加高效,因为它们是由浏览器原生支持的,可以通过GPU加速进行处理,从而提高性能。
- 简单易用: 使用CSS动画相对于JavaScript来说更简单,不需要编写复杂的代码,只需要通过简单的CSS样式就可以实现各种动画效果。
- 响应式设计: CSS动画可以很容易地与响应式设计相结合,根据不同的屏幕大小和设备类型提供不同的动画效果。
- 可维护性: 通过CSS动画,可以将动画效果与样式表分离,使得代码更易于维护和管理。
3.特点
- 关键帧定义: CSS动画通过在关键帧中定义元素的不同状态来控制动画的过程。
- 过渡效果: 可以定义动画的过渡效果,例如线性、缓入缓出等。
- 可控性: 开发者可以通过调整关键帧的时间和属性来控制动画的速度和效果。
- 浏览器支持: CSS动画得到了现代浏览器的广泛支持,包括Chrome、Firefox、Safari等主流浏览器。
4.用法
- 定义关键帧: 使用
@keyframes
关键字定义关键帧,并指定动画效果的起始状态和结束状态。 - 应用动画: 使用
animation
属性将动画应用到元素上,并指定动画的名称、时长、过渡效果等。 - 可选的动画属性: 可以使用其他CSS属性来进一步控制动画效果,如
animation-delay
、animation-iteration-count
、animation-direction
等。
二、使用
1.定义关键帧(Keyframes):
使用 @keyframes
规则定义动画的关键帧,即描述动画在不同时间点的状态。关键帧规则中包含了动画的起始状态(0%)和结束状态(100%),以及可能的中间状态。
@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
2.应用动画:
将定义好的关键帧动画应用到目标元素上,通过 animation
属性设置动画的名称、时长、过渡效果、延迟等。
.element {
animation: slidein 2s ease-in-out 1s infinite alternate;
}
这里的 slidein
是之前定义的关键帧动画名称,2s
是动画持续的时间,ease-in-out
是动画的时间函数,1s
是动画延迟开始的时间,infinite
表示动画无限循环播放,alternate
表示动画在每次重复播放时交替反向播放。
3.可选的动画控制属性:
使用其他动画控制属性可以进一步调整动画的效果,如 animation-delay
控制动画延迟开始时间,animation-fill-mode
控制动画执行前后元素样式的状态等。
.element {
animation-delay: 1s;
animation-fill-mode: both;
}
animation-delay
设置了动画延迟1秒开始,animation-fill-mode: both;
设置了动画结束后元素应该保持动画最后一帧的状态。
4.实现动画效果的优化:
在设计和实现动画效果时,需要考虑性能优化和用户体验。避免过于复杂或频繁的动画效果,以免影响页面性能和用户体验。
.element {
will-change: transform; /* 提前告诉浏览器元素会发生变化,优化动画性能 */
}
使用 will-change
属性可以提前告知浏览器哪些属性将会发生变化,从而优化动画性能。
三、动画属性
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
四、实例说明
1.运行myfirst动画,设置所有的属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
2.与上面的动画相同,但是使用了简写的动画 animation 属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
五、总结
CSS动画是通过CSS样式表来创建动态效果的技术。以下是关于CSS动画的一些要点总结:
-
关键帧动画(Keyframe Animation): 使用
@keyframes
规则定义动画的关键帧,描述动画在不同时间点的状态。 -
动画属性(Animation Properties): 使用
animation
属性将动画应用到元素上,包括动画名称、持续时间、时间函数、延迟等。 -
动画控制属性(Animation Control Properties): 使用
animation-delay
、animation-iteration-count
、animation-direction
等属性控制动画的延迟、重复次数、方向等。 -
过渡动画(Transition Animation): 使用
transition
属性在元素状态改变时实现平滑过渡效果,定义过渡的属性、持续时间、时间函数等。 -
性能优化(Performance Optimization): 通过合理使用动画属性、减少复杂度和频率、优化渲染性能等手段提高动画性能。
-
交互性动画(Interactive Animation): 使用CSS伪类和JavaScript结合实现交互性动画效果,例如悬停、点击等触发的动画。
-
适应性(Adaptiveness): CSS动画可以与响应式设计结合,根据不同设备或屏幕尺寸提供不同的动画效果。
-
可维护性(Maintainability): 将动画效果与样式表分离,使用模块化的方式定义和管理动画,提高代码的可维护性。
综上所述,CSS动画是一种简单、灵活且性能高效的前端技术,能够为网页提供各种各样的动态效果,增强用户体验并且易于实现和维护。