CSS3动画

关键帧:CSS3动画通过关键帧控制动画的每一步。

桌面浏览器在webkit中可以看到效果,移动设备上iOS和Android基本上都可以运行。

创建动画用@keyframes规则,后跟所选择的名称,该名称用于动画的标识符。然后指定关键帧。


@-webkit-keyframes testAnimation1 {

   0%{opacity:0;}

   50%{opacity:0.8;}

   100%{opacity:1.0;}

}


每个关键帧就像自己嵌套的CSS声明块。也可使用from和to来指定帧的内容。


@-webkit-keyframes testAnimation2 {

   0%,100%{opacity:0;}

   20%,80%{opacity:0.8;}

}

上面的代码表示元素最初不可见,渐渐淡入到20%时为可见,然后持续可见到80%,最后淡出。


动画属性:

animation-name: "testAnimation1";

animation-duration: 1s;

animation-timing-function: ease;

animation-interation-count: infinite;

animation-direction: alternate;

animation-delay: 1s;

aniamtion-fill-mode: animation-play-state;


简写成:

.mycss{

   -webkit-animation: "testAnimation1" 1s ease infinite;

}

这样就可以调用前面声明的关键帧动画了。


如需转载,请注明出处: https://chadou.me/p/143

最新发布