<!--
动画
1、概念
过渡属性只能模拟简单的动画效果，CSS中，animation属性用制作类似flash的动画效果，通过关键帧控制动画的每一步是元素从一种样式逐渐转换成另一种样式，可以实现复杂的动画效果。
2、动画的使用
-声明动画：创建一个已命名的动画，使用@keyframes来声明动画。
-调用动画：使用animation调用动画，设置动画的时间，播放次数等。
3、关键帧
帧：是动画中的最小单位，是单幅影像画面；
关键帧：指角色或者物体变化中的关键动作所处的那一帧，用来定义动画变化、更改状态的帧。
@keyframes用来声明动画，指定关键帧，其语法为：
@keyframes name{
from/0%{
css样式;
}
percent(百分比，指从开始到结束之间的某位置){
CSS样式
}
to/100%{
CSS样式
}
}
4、动画子属性
animation-name：调用动画，指定动画名字
animation-duration：动画播放一个周期的时间，单位是秒或毫秒
animation-timing-function：规定动画的速度曲线，取值参照过渡
animation-delay：延迟时间
animation-iteration-count：动画播放的循环次数，取值为数值或者infinite（表示无限循环）
animation-direction：动画播放的方向，取值为normal或者alternate，alternate表示轮流播放，也是在奇数次时正常播放，偶数次时向后播放
animation:简写属性，可以设置动画的名字、时间、次数等，其语法为：animation:name duration timing-function delay interation-count direction;
animation-fill-mode:规定动画播放前后其动画效果是否可见，可取值为none，forwards，当动画完成后，保持最后一个属性值；backwards，在动画显示之前应用开始的属性值，both表示前后都应用
-->
<html>
<head>
<title></title>
<style type="text/css">
/*声明动画*/
@keyframes change{
from{
margin-left: 10px;
background: green;
}
30%{
margin-left: 20px;
background: blue;
}
to{
margin-left: 100px;
background: red;
}
}
#d1{
width: 100px;
height: 100px;
border: 1px solid black;
animation:change 3s;
}
@keyframes change1{
from{
transform:rotate(0deg);
background: green;
}
20%{
transform:rotate(90deg);
background: red;
}
to{
transform:rotate(360deg);
background: blue;
}
}
#d2{
width: 100px;
height: 100px;
border: 1px solid black;
animation-name:change1;
animation-duration:5s;
animation-timing-function:ease-in;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:alternate;
animation-fill-mode:both;
/*animation:change1 5s linear;*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
动画
1、概念
过渡属性只能模拟简单的动画效果，CSS中，animation属性用制作类似flash的动画效果，通过关键帧控制动画的每一步是元素从一种样式逐渐转换成另一种样式，可以实现复杂的动画效果。
2、动画的使用
-声明动画：创建一个已命名的动画，使用@keyframes来声明动画。
-调用动画：使用animation调用动画，设置动画的时间，播放次数等。
3、关键帧
帧：是动画中的最小单位，是单幅影像画面；
关键帧：指角色或者物体变化中的关键动作所处的那一帧，用来定义动画变化、更改状态的帧。
@keyframes用来声明动画，指定关键帧，其语法为：
@keyframes name{
from/0%{
css样式;
}
percent(百分比，指从开始到结束之间的某位置){
CSS样式
}
to/100%{
CSS样式
}
}
4、动画子属性
animation-name：调用动画，指定动画名字
animation-duration：动画播放一个周期的时间，单位是秒或毫秒
animation-timing-function：规定动画的速度曲线，取值参照过渡
animation-delay：延迟时间
animation-iteration-count：动画播放的循环次数，取值为数值或者infinite（表示无限循环）
animation-direction：动画播放的方向，取值为normal或者alternate，alternate表示轮流播放，也是在奇数次时正常播放，偶数次时向后播放
animation:简写属性，可以设置动画的名字、时间、次数等，其语法为：animation:name duration timing-function delay interation-count direction;
animation-fill-mode:规定动画播放前后其动画效果是否可见，可取值为none，forwards，当动画完成后，保持最后一个属性值；backwards，在动画显示之前应用开始的属性值，both表示前后都应用
-->
<html>
<head>
<title></title>
<style type="text/css">
/*声明动画*/
@keyframes change{
from{
margin-left: 10px;
background: green;
}
30%{
margin-left: 20px;
background: blue;
}
to{
margin-left: 100px;
background: red;
}
}
#d1{
width: 100px;
height: 100px;
border: 1px solid black;
animation:change 3s;
}
@keyframes change1{
from{
transform:rotate(0deg);
background: green;
}
20%{
transform:rotate(90deg);
background: red;
}
to{
transform:rotate(360deg);
background: blue;
}
}
#d2{
width: 100px;
height: 100px;
border: 1px solid black;
animation-name:change1;
animation-duration:5s;
animation-timing-function:ease-in;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:alternate;
animation-fill-mode:both;
/*animation:change1 5s linear;*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
4684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
