css3学习小结1

CSS属性,并列出是否支持CSS动画: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties 自己做一个小结~ [css] .ball { animation-name: ballmove; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay: 1s; animation-fill-mode: both; } @keyframes ballmove { 0% { transform: translateX(100px) rotate(0); } 20% { transform: translateX(-10px) rotate(-0.5turn); } 100% { transform: translateX(450px) rotate(2turn); } } [/css] W3C目前定义的简写顺序是这样的： [css] = [/css] 例子: [css] animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s; [/css] 详细:http://www.w3school.com.cn/css3/css3_animation.asp 其他参考:http://www.w3cplus.com/css3/CSS3-animation.html