css动画
css动画
简介
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
- 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
- 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
- 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
配置
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。
animation的子属性：
- animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。 - animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 - animation-duration
设置动画一个周期的时长。 - animation-iteration-count
设置动画重复次数， 可以指定infinite无限次重复动画 - animation-name
指定由@keyframes描述的关键帧名称。 - animation-play-state
允许暂停和恢复动画。 - animation-timing-function
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。 - animation-fill-mode
指定动画执行前后如何为目标元素应用样式。
案例1简易运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画 animation</title>
<style>
div{
width: 100px;
height: 100px;
background: greenyellow;
/*使用名字为demo的动画*/
animation-name: demo;
/*动画共耗时5秒*/
animation-duration: 5s;
}
@keyframes demo {
/*起始特征描述*/
from{
background-color: greenyellow;
}
/*结束特征描述*/
to{
background-color: pink;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
案例2死循环运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画 animation</title>
<style>
@keyframes demo {
from{
margin-left: 200px;
width: 150px;
height: 120px;
}
to{
margin-left: 700px;
width: 500px;
height: 250px;
}
}
div{
background-color: cornflowerblue;
animation-name: demo;
animation-duration: 3s;
animation-direction: initial;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
案例3来回摇摆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画 animation</title>
<style>
@keyframes slidein{
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<p>我的天空，可会有湿的泪。</p>
</body>
</html>
案例4添加关键的帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画 animation</title>
<style>
@keyframes slidein{
from {
margin-left: 100%;
width: 300%;
}
50%{
background-color: cornflowerblue;
margin-left: 60%;
}
to {
margin-left: 0%;
width: 100%;
}
}
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<p>我的天空，可会有湿的泪。</p>
</body>
</html>
