动画特效(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或alternateanimation-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>
