刚开始接触CSS3动画,就觉得很有意思,很新颖,但是掌握起来就不是那么容易了。
对于数学思维不是很好的我来说,真的对于动画的学习很困难,难道就此打退堂鼓吗?不是的。我觉得理论知识的学习很重要,只有当你很熟悉动画属性时,才会更好地结合实践。下面是我认为学起来相对吃力的地方,希望能够帮助也有相同疑惑的你们。
1.认识transform
transform是什么?
transform的含义是:改变,使…变形;转换
transform有哪些属性?transform:属性(值);
transform的属性包括:旋转rotate() 倾斜skew() ,缩放scale() ,位移 translate() ,矩阵matrix(),原点transform-origin
a. 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。注:其中“deg”是“度”的意思,如“10deg”表示“10度,同skew()中deg。
b.倾斜skew()函数让元素以其中心位置围绕x轴和y轴按照一定角度倾斜。注:skew()不会旋转,只会改变元素的形状。而rotate()不会改变元素的形状,只会旋转。
c.缩放scale() 函数让元素根据中心原点对对象进行缩放。注:缩放scale() 的默认取值是1,当值设为0.01-0.99之间,为缩小,反而反之。
d.位移 translate()函数可以将函数向指定的方向移动。注:不会影响x,y轴上的任何web组件,向左向下位移则为负“-”。
e.矩阵matrix()是一个含六个值(a,b,c,d,e,f)变换矩阵。
f.原点transform-origin 改变原点的位置(前面我们提到的transform的方法都是基于元素的中心来变换的,也就是元素变换的基点默认是元素的中心)。
2.认识transition
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
a.transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。
b.transition-duration:指定属性过渡的持续时间
c.transition-timing-function:指定渐变的速度(过渡的“缓动函数”):
1、ease:(逐渐变慢)默认值
2、linear:(匀速)
3、ease-in:(加速)称为渐显效果
4、ease-out:(减速)称为渐隐效果
5、ease-in-out:(加速然后减速)称为渐显渐隐效果
d.transition-delay:指定延迟时间,也就是经过多长时间才开始执行过渡过程。
例如:a{ transition :background 0.8s ease 0.3s;} 等价于:
a{transition-property:background;
transition-duration:0.8s;
transition-timing-function:ease;
transition-delay:0.3s;}
借助transition的帮忙来演示一个关于css3 transform的实例:
a{ transition :all 0.8s ease 0.3s;}
a:hover{transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);}
3.认识animation
要使用animation动画,必须知道keyframes,被称为关键帧。
Keyframes的语法规则:命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则。即:@keyframes+动画名称+{......}
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-fuction 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
例如:.block{animation :mingzi 0.8s ease 0.3s;}
@keyframes mingzi{
from{background:red;}
to{background:green;} }
下面是我做的很简单的小例子,希望有需要的可以了解一下
file:///C:/Users/ASUS/Desktop/%E7%89%B9%E6%95%88/%E7%89%B9%E6%95%88.html