动画特效(animation)
1.引入
我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画。
2.动画特效(animation)
(1)、概述:CSS 可使用animation实现 HTML 元素的动画效果,而不使用 JavaScript 或 Flash!
(2)、动画animation相关的语法和参数说明
要实现一个动画的效果,需要实现两个步骤,如下:
①:使用@keyframes规则创建一个动画,用于定义相关的动画的属性,语法如下:
使用@keyframes规则创建一个动画其语法有以下两种方式:
@keyframes 名称{
form {
设置起始的样式属性
}
to {
设置结束的样式属性
}
}
------------------------------------------------
@keyframes 名称{
0%{
设置起始的样式属性
}
50%{
设置中间的样式属性
}
100%{
设置结束的样式属性
}
}
②:使用关键字animation以及相关的属性调用@keyframes定义的名称实现动画
animation相关的语法以及参数说明
语法:
animation:名称 持续时间 动画速度 延迟时间 播放次数
参数说明:
animation-delay:该参数用于指定延迟时间,是指动画开始之前的延迟时间。
animation-direction:指定播放循环的时间和是否反向播放过渡的持续时间,参数值为:normal或alternate
animation-duration:指定动画播放的持续时间
animation-iteration-count:指定动画的播放次数,可以使用关键字infinite(无数)或数值。
animation-name:这一个参数用于指定之前@keyframes所指定的参数,指的是动画的名称。
animation-timing-function:指定过渡效果的变化速度。其指主要有以下几个:
ease:默认值,从慢速开始,然后开始加速,然后再以慢速结尾的过渡方式。
linear:从始至终以相同的速度结束的过渡效果。
ease-in:以慢速开始的过渡效果
ease-out:以慢速结束的过渡效果
ease-in-out:以慢速开始、慢速结束的过渡效果
animation:复合属性,整个动画的简写
(3)、动画animation相关代码实现以及实现效果
<style type="text/css">
.box {
width: 200px;
height: 150px;
border: 1px solid red;
background-color: #00dc00;
box-shadow: 0px 0px 20px #008000;
color: #ffff00;
}
<!--声明帧组:这里就只设置颜色变化了-->
@keyframes text-anim{
0%{
background-color: #0000FF;
}
50%{
background-color: #ff0000;
}
100%{
background-color: #aa00ff;
color: #55aaff;
width: 100px;
height: 75px;
border: 1px solid black;
}
}
<!--设置动画的相关属性-->
.box:hover{
/* animation-delay: 100ms;
animation-duration: 1500ms;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: demoTest; */
animation: text-anim 1500ms linear 100ms alternate infinite;
}
</style>
<body>
<div class="box">
动画相关效果实现
</div>
</body>