码迷,mamicode.com
首页 > Web开发 > 详细

CSS3动画效果

时间:2015-06-17 21:53:26      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

渐隐渐显

@-webkit-keyframes cf3FadeInOut { 0% { opacity:1; } 20% { opacity:.8; } 50% { opacity:0.5; } 70%{ opacity: .3;} 100% { opacity:0; } } div.bg { -webkit-animation-name: cf3FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 3s; }

晃动

.hand-animate { -webkit-animation: hand_move infinite 2s; } @-webkit-keyframes hand_move { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } }

CSS3动画效果

标签:

原文地址:http://my.oschina.net/u/232595/blog/467994

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!