css3 animation development notes_html/css_WEB-ITnose

Animation slide-out effect

First let’s look at DMEO.
The size of the button has an enlargement effect. Use the transform: scale method to achieve this; during the magnification process, the button's position translates from right to left. This effect can be achieved by changing the value of left. In order to avoid the abrupt feeling when the button first appears, use opacity: 0 to hide the button. As the button moves, the opacity value gradually changes to 1. The total code is:

@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;} }

Then comes the light effect. The width of the light changes from 0 to 178, and the transparency changes from 0 to 1.
Light frame animation:

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

Finally, adjust the duration and delay time of the animation to maintain coordination:

.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;  } 

Add two implementations of similar effects: DMEO1 , DEMO2