css动画效果

@keyframes ?动画名称 {/*定义关键帧即不同时间点上的动画状态*/from | 0%{/*动画的开始状态(样式)*/transform:rotate(0deg)}/*...若干关键帧*/20%{/*动画在执行到20%的时候的状态(样式)*/}25%{}26%{}to | 100%{/*动画结束时候的状态(样式)*/transform:rotate(360deg)}}

动画属性(调用) ?????1、animation-name : 调用动画的名称，指定 @keyframes 的名字 ?????2、animation-duration:动画执行的时常以 s或ms ?????3、animation-timing-function:动画执行时的速度效果 ????????取值 ease,linear,ease-in,ease-out,ease-in-out ?????4、animation-delay:延迟时间，以s或ms为单位 ?????5、animation-iteration-count ????????动画执行的次数 ????取值 ： ???????1、具体数值 ????????2、infinite : 无限次播放 ?????6、animation-direction : 动画播放方向 ????????取值： ???????normal ???????alternate : ???????????奇数次播放为正向播放(状态从from - to) ??????????偶数次播放为逆向播放(状态从to - from) ?????7、动画综合属性 : animation:mingcheng 2s ease 1s 3 ????????ainimation:name duration timing-function delay iteration-count direction; ?????8、animation-fill-mode ????????指定动画在播放之前或之后的效果 ????none : 默认行为 ????forwards:动画完成后，保持最后一个状态 ????backwards : 动画显示之前，保持在第一个状态 ????both:动画完成后，动画显示前，都被相应的状态所保持着。 ????????????????9、animation-play-state ????????定义动画播放状态 ????配合着 Javascript使用，用于播放过程中暂停动画 ????取值： ???????paused ：暂停 ???????running ：播放

<div class="music"> ???????<div class="music1"></div> ???????<div class="music2"></div> ???????<div class="music3"></div> ???????<div class="music4"></div> ???????<div class="music5"></div> ???</div>

.music div{ ???width: 5px; ???height: 40px; ???background-color: #1F1E1E; ???display: inline-block;}.music1 { ???animation:music 1s linear 0.2s infinite;}.music2 { ???animation:music 1s linear 0.4s infinite;}.music3 { ???animation:music 1s linear 0.6s infinite;}.music4 { ???animation:music 1s linear 0.8s infinite;}.music5 { ???animation:music 1s linear 1s infinite;}@keyframes music { ???from { ???????transform: scaleY(0.1); ???} ???to{ ???????transform: scaleY(0.5); ???}}

<div class="icon"> ???????<ul> ???????????<li class="icon_one"></li> ???????????<li class="icon_two"></li> ???????????<li class="icon_three"></li> ???????????<li class="icon_four"></li> ???????????<li class="icon_five"></li> ???????</ul> ???</div>

.icon { ???position: relative;}.icon li { ???width: 173px; ???height: 173px; ???list-style: none; ???display: inline-block; ???position: absolute;}.icon_one { ???background: url(../images/iconlist_1.png) no-repeat; ???animation: icon_one 10s linear 1;}.icon_two { ???background: url(../images/iconlist_1.png) no-repeat; ???background-position: -174px; ???animation: icon_two 10s linear 1;}.icon_three { ???background: url(../images/iconlist_1.png) no-repeat; ???background-position: -348px; ???animation: icon_three 10s linear 1;}.icon_four { ???background: url(../images/iconlist_1.png) no-repeat; ???background-position: -522px; ???animation: icon_four 10s linear 1;}.icon_five { ???background: url(../images/iconlist_1.png) no-repeat; ???background-position: -696px; ???animation: icon_five 10s linear 1;}@keyframes ?icon_one { ???from { ???????transform: translate(0px); ???} ???to { ???????transform: translate(150px); ???}}@keyframes ?icon_two { ???from { ???????transform: translate(0px); ???} ???to { ???????transform: translate(300px); ???}}@keyframes ?icon_three { ???from { ???????transform: translate(0px); ???} ???to { ???????transform: translate(450px); ???}}@keyframes ?icon_four { ???from { ???????transform: translate(0px); ???} ???to { ???????transform: translate(600px); ???}}@keyframes ?icon_five { ???from { ???????transform: translate(0px); ???} ???to { ???????transform: translate(750px); ???}}

<div class="circle"></div>

.circle { ???width: 150px; ???height: 150px; ???border-radius: 50%; ???border:6px solid #656363; ???border-bottom-color: #F9A2A2; ???border-right-color: #F9A2A2; ???animation:anmiate 2s linear 0s infinite;}@keyframes anmiate { ???from { ???????transform: rotate(0deg); ???} ???to{ ???????transform: rotate(360deg); ???}}