web前端开发【连载7】-CSS3动画相关属性

今天准备学习一下CSS3关于转换的相关属性，不用说，继续跟着鑫神的脚步前进，不愿做奴隶的人们_哈哈哈鑫神不仅技术了得，手绘段子水平也是一流啊，想要整理的比他好真的很难呐~

图片发自App

CSS3动画相关的属性

• transform：变换效果，其作用相当于PS中的ctrl+t自由变换
  transform属性：

rotate 旋转
scale 尺寸放大缩小
skew 倾斜角度
translate移动距离

 transform: skew(35deg); 
 transform:scale(1, 0.5); 
 transform:rotate(45deg); 
 transform:translate(10px, 20px); 

• transition：过渡效果，其作用就是平滑的改变CSS的值，常用于平滑变化到hover之后的状态
  transform属性：

transition-property : //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration：//指定这个过渡的持续时间
transition-delay： //延迟过渡时间
transition-timing-function：//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
其中：linear //线性过度 ， ease-in //由慢到快 ，ease-out //由快到慢 ，ease-in-out //由慢到快在到慢

transition:all 2s ease-in-out;

• animation：创建一段动画然后在规定时间内执行
  animation的属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。infinite无穷的
animation-direction 规定是否应该轮流反向播放动画。

.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

具体实例参照原文：CSS3 Transitions, Transforms和Animation使用简介与应用展示
github代码：https://github.com/Iris-mao/css-tricks/tree/master/picRotate