标签：charset 设置 选项 mod utf-8 stat 控制 浏览器 corn
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。
animation的子属性：
<!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><!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><!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><!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>标签：charset 设置 选项 mod utf-8 stat 控制 浏览器 corn
原文地址：https://www.cnblogs.com/qiudaozhang/p/9533275.html
