当前位置: 秋叶网络博客 前端编程 ◊ 和我一起学习CSS3动画属性

和我一起学习CSS3动画属性

作者:秋了秋 发表时间:2015年05月01日

之前分享的一篇文章《用Html5造频谱播放的巅峰视觉盛宴》,我们知道html5可以生成如同flash的动画,可是别忘了html5还有一个搭档css3,如同html5一样,css3也是前沿技术,一样可以做出各式各样的动画,借助渐变的属性我们可以让其从某个状态变为另一个状态,期间的渐变效果就产生了动画,那么css3有哪些动画属性呢?跟随我的脚步,睁大你的眼睛,一起来学习一下吧。

CSS3中和动画有关的属性有三个 transform、transition 和 animation。为了达到各种浏览器的兼容,所以我们定义每个属性都要单独对不同浏览器做相关工作,如:

#baijia{
-webkit-transform: skew(-15deg) rotate(-6deg);//Safari and Chrome浏览器的应用效果
-moz-transform: skew(-15deg) rotate(-6deg);//火狐浏览器的应用效果
-ms-transform: skew(-15deg) rotate(-6deg);//IE浏览器的应用效果
-o-transform: skew(-15deg) rotate(-6deg);//Opera浏览器的应用效果
transform: skew(-15deg) rotate(-6deg);//默认的应用效果
}

1.transform可以理解为变形属性: none 表示不进行变换;如:transform:none; rotate 旋转;如:transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left、top、center、right、bottom或坐标值(50px 70px)。 skew 扭曲;如:transform:skew(30deg,30deg) 释义:skew(相对x轴倾斜,相对y轴倾斜) scale 缩放;如:transform:scale(2,3)横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。 translate 移动;如:transform:translate(50px, 50px); matrix 矩阵变形;基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜;tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate (tx,ty) 2.Transition是过渡属性: 1)transition-delay: 过渡变换延迟的时间,单位是s(秒),也就是说如果我们将此属性设为1s(transition-delay:1s),则我们的过渡会延迟一秒进行。 2)transition-property: 执行变换的属性,我们通过此属性在指定我们需要进行过渡的属性,默认是所有属性。如:transition-property:none||all||[ ] 3)transition-duration: 过渡持续的时间,单位是s(秒),如果我们将此属性设为1s(transition-duration:1s),则过渡会持续1秒钟介绍。 4)transition-timing-function: 变化率,这个主要是指定我们过渡时的速度的变化率。它的值有: ease:此属性是默认值,代表过渡逐渐变慢。 linear:匀速变化。 ease-in:加速变化。 ease-out:减少变化。 ease-in-out:先加速然后在减速 简写与串写举例:a {transition: background 0.5s ease-in,color 0.3s ease-out}或a{transition: all 0.5s ease-in} 3.animation 动画属性 使用这个属性之前我们要先定义一个动画,名字任意取,如: @-webkit-keyframes qiuye{ 0% {margin-left: 100px;background: green;} 40% {margin-left: 150px;background: orange;} 60% {margin-left: 75px;background: blue;} 100% {margin-left: 100px;background: red;} } 这里定义一个名为“qiuye”了四个阶段的样式(0%、40%、60%、100%),接下来就是引用这个动画了: #qiuqiu{ -webkit-animation-name:qiuye;/*动画属性名,也就是我们前面定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式或者normal*/ }

简写语法:

animation: animation: name duration timing-function delay iteration-count direction fill-mode play-state;;

效果举例:

秋叶
0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/343.html
目录: 前端编程 | 标签: css3动画 | 5101次阅读