本篇文章主要介绍了"CSS3中的动画，animation、transition和transform属性的运用"，主要涉及到transition,animation方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
CSS3中使用animation属性，可以不适用JavaScript而制作动画，运用的好，可以做到很多漂亮的效果，最近有空，来摸索一下animation的使用，...
CSS3中使用animation属性，可以不适用JavaScript而制作动画，运用的好，可以做到很多漂亮的效果，最近有空，来摸索一下animation的使用，做几个demo玩玩
animation属性的介绍
animation属性能够改变元素的位置和各种css属性
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name 需要绑定到选择器的keyframe的名称（由@keyframe自定义在下边）
- animation-duration 规定完成动画花费的时间，以s或者ms为单位（速度）
- animation-timing-function 规定动画的速度曲线（linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线）
- animation-delay 规定动画开始之前的延迟（s为单位，可以是负值，负值时表示一开始跳过前边的2s动画，即直接从动画第2秒的地方开始）
- animation-iteration-count 规定动画应该播放的次数（默认1，可填数字次数，还有infinite无限次）
- animation-direction 规定是否应该轮流反向播放动画（默认normal，还有alternate表示可以正反往复播放）
创建动画
上边的animation-name属性，需要填写一个自定义的动画名称，这就需要我们创建动画。在css3中，使用@keyframes规则来创建动画。但是这里要特别注意，目前的浏览器都不支持@keyframes，所以在使用的时候，要写成下边的形式：
- @keyframes+name
- @-moz-keyframes+name ———Firefox
- @-o-keyframes+name ————-Opera
- @-webkit-keyframes+name ——Safari 和 Chrome
定义和用法
- 通过 @keyframes 规则，您能够创建动画。
- 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
- 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0%和 100%。
- 0% 是动画的开始时间，100% 动画的结束时间。
- 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
例如：
//这里我只写了一个，实际上要注意不同的浏览器支持不同，同一个mymove要用不同的keyframes格式定义多次@keyframes mymove
{
0% {top:0px;left:0px;background:red;}
25% {top:0px;left:100px;background:blue;}
50% {top:100px;left:100px;background:yellow;}
75% {top:100px;left:0px;background:green;}
100% {top:0px;left:0px;background:red;}
}
———————————————————–我是分割线————————————————————-
transition属性的介绍
transition属性用于平滑过渡，在hover或者click的时候，改变各种css属性时，实现平滑过渡，而不是瞬间改变
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 要过渡的css属性名（还可以是none，即都不；和all，即全部属性都过渡）
- transition-duration 完成过渡所需的时间，s或者ms
- transition-timing-function 过渡效果的速度曲线（linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线）
- transition-delay 过渡开始之前的延迟
但是这里要特别注意，为了满足不同浏览器的支持，要写成下边的形式：
div
{
width:100px;height:100px;background:blue;//改变宽度 在2s内改变 线性改变 延迟1s后改变transition:width 2s linear 1s;
-moz-transition:width 2s linear 1s;/* Firefox 4 */
-webkit-transition:width 2s linear 1s;/* Safari and Chrome */
-o-transition:width 2s linear 1s;/* Opera */
}
div:hover
{
width:300px;
}
———————————————————–我是分割线————————————————————-
transform属性的介绍
transform属性指变换，包括拉伸，压缩，旋转，偏移等等。
transform分为2D转换和3D转换，下边分别来说。
transform的2D转换：
