css3动画开发笔记_html/css_WEB-ITnose

@keyframes fade {    from{ background: rgba(62, 191, 36, 1); transform: scale(0.5); left: 146px;}    50%{ background: rgba(62, 191, 36, 1);}    to{ background: rgba(62, 191, 36, 1); transform: scale(1); left: 0;} }

@keyframes shadow {    from{ width: 0; opacity: 0;}    to{ width: 178px; opacity: 1;} }

.ani1 .shadow{    -webkit-animation-name:shadow;/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: .8s;/*动画持续时间*/     -webkit-animation-timing-function: linear;迟时间*/     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/     -webkit-animation-fill-mode: forwards;  }  .ani1 .icons{    -webkit-animation-name: fade;/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 0.75s;/*动画持续时间*/     -webkit-animation-timing-function: linear; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: .2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/     -webkit-animation-fill-mode: forwards;  }