CSS实战手册
CSS变形，过渡和动画
1 变形 transform
- 1.1 旋转:rotate
- transform:ratate(180deg);
- 1.2 缩放:scale
-
transform:scale(2)
ps:0会让元素从页面中消失。放大的时候如果空 间不够则会叠加到其他元素上 - transform:scale(0.5,2);分别为横向和纵向缩放
- transform:scaleY(2)
-
transform:scaleX(2)
缩放还可以上下对调和前后对调效果 - transform:scale(-1)：实现上下左右对调
- transform:scale(-1,1):实现横轴翻转
- 1.3 平移:translate
- transform:translate(1px,2px)：横向和纵向
- transform:translateX(-0.5em)
- transform:translateY(2em)
- 1.4 倾斜:skew
- transform:skew(45deg,0):向左倾斜45度，逆时针旋转
- transform:skew(0，45deg)
- transform:skew(45deg,45deg)
- skewX和skewY
-
1.5 多重变形
- transform:rotate(45deg) scale(5) translate(400px,500px) skew(45deg,0deg);
- 1.6 原点
- 默认元素中心为变形原点
- transform-origin可以修改元素变形原点
- transform-origin:left top;和transform-origin:0 0和transform-origin:0% 0%;是等价的，是左上角为原点
- 右下角：transform-origin:right bottom;\transform-oringin:100% 100%
- transform-origin属性对只使用translate函数移动的元素没有效果。
2 过渡:transition
-
2.1
- IE10之前版本不支持transition
- 实现过渡效果，要满足以下几个条件
- 两个样式。一个样式表示过渡前的外观，另一个样式表示过渡后的外观。
- transition属性。CSS提供的transition属性，一般情况下，transition属性要添加到初始样式中
- 触发器。触发器是指促使元素在两个样式之间变化的操作
- 2.2 添加过渡效果
-
transition-property:指定要以动画显示的属性
transition-property:all
- transition-duration:指定动画持续多长时间
-
transition-timing-function:控制动画的速率
- linear：匀速
- ease：开始很慢中间加速最后有降速
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
- transition-delay:延迟开始过渡
-
过渡属性的简写形式：transition:all 1s ease-in .5s;顺序是属性、持续时间、属性函数和延迟
- transition:all 1s;
3 动画 animation
-
3.1 关键帧
- IE10之前版本不支持动画
- 关键帧：指展示画面的一帧
-
创建动画的过程分成以下两步：
- 定义动画：设置关键帧，列出要变化的CSS属性。
- 把动画应用到元素上：定义好动画后，可以把动画应用到页面中的任意元素上。而且可以分别为每个元素设置时序、延迟和其他动画属性。
-
定义关键帧
-
设置关键帧：
-
4.png- 3.png
- 2.png
-
3.2 animation属性
- animation-duration
- animation-timing-function(linear、ease、ease-in、ease-out、ease-in-out)-
- animation-name
- animation-delay
- animation-iteration-count(动画运行次数：10、infinite(无数次)等)
- animation-direction:alternate;(让动画在奇偶次数分别正向和反向播放)
- animation-fill-mode:forwards;(让元素显示动画结束后的样式)
- animation-play-state:pause(暂停)/running(执行)
- 5.png
-
3.3 动画简写形式
- 1.png
