CSS变形、过渡和动画

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
  • 实现过渡效果，要满足以下几个条件
  1. 两个样式。一个样式表示过渡前的外观，另一个样式表示过渡后的外观。
  2. transition属性。CSS提供的transition属性，一般情况下，transition属性要添加到初始样式中
  3. 触发器。触发器是指促使元素在两个样式之间变化的操作
• 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之前版本不支持动画
  • 关键帧：指展示画面的一帧
  • 创建动画的过程分成以下两步：
    1. 定义动画：设置关键帧，列出要变化的CSS属性。
    2. 把动画应用到元素上：定义好动画后，可以把动画应用到页面中的任意元素上。而且可以分别为每个元素设置时序、延迟和其他动画属性。
  • 定义关键帧

    1. 设置关键帧：
       

       - 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