CSS：transition、animation

1.浏览器前缀

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

浏览器	内核	前缀
IE	Trident	-ms-
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera,Chrome	Blink

2. transition 过渡

​ transition-property : 规定设置过渡效果的CSS属性的名称。
​ transition-duration : 规定完成过渡效果需要多少秒或毫秒。
​ transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
​ transition-timing-function : 规定速度效果的速度曲线

注：不要加到hover上。

只写transition时：不写property就是all，两个时间一块写前者是duration，后者是delay。

3.transfrom变形

• translate : 位移

  translateX

  translateY

  translateZ （3D）

• scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）

  scaleX

  scaleY
  scaleZ（3D）

• rotate：旋转（旋转的值，单位是角度deg）

  rorateX (3d)

  rotateY (3d)

  rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )

• skew : 斜切
  skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
  skewY

• transform的注意事项：

  1. 变形操作不会影响到其他元素。

  2. 变形操作只能添加给块元素，但是不能添加给内联元素。

  3. 复合写法，可以同时添加多个变形操作。

     执行是有顺序的，先执行后面的操作，再执行前面的操作。

     translate会受到 rotate、scale、skew的影响

  4. transform-origin : 基点的位置

     x y z(3d)

4.animation 动画

​ animation-name : 设置动画的名字 (自定义的)
​ animation-duration : 动画的持续时间
​ animation-delay : 动画的延迟时间
​ animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
​ animation-timing-function : 动画的运动形式

注：

1. 运动结束后，默认情况下会停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
3. 复合形式写法中，先写的为持续时间，后写的为延迟时间

• animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。

  • none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
  • backwards : 在延迟的情况下，让0%在延迟前生效
  • forwards : 在运动结束的之后，停到结束位置
  • both : backwards和forwards同时生效

• animation-direction : 属性定义是否应该轮流反向播放动画。

  • alternate : 一次正向(0%_{100%)，一次反向(100%}0%)
  • reverse : 永远都是反向 , 从100%~0%
  • normal (默认值) : 永远都是正向 , 从0%~100%

5. animate.css

​ 一款强大的预设css3动画库。
​ 官网地址：https://daneden.github.io/animate.css/

基本使用：
    animated : 基类(基础的样式，每个动画效果都需要加)
    infinite : 动画的无限次数

6. 3D操作

transform:

rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前，负值向后
scaleZ() : 立体元素的厚度

​

• 3d写法

  • scale3d() : 三个值 x y z
  • translate3d() : 三个值 x y z
  • rotate3d() : 四 个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

• perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。

• perspective-origin : 景深-基点位置，观察元素的角度。

• transform-origin: center center -50px; （Z轴只能写数值，不能写单词）

• transform-style : 3D空间

  • flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

• backface-visibility : 背面隐藏

  • hidden、visible (默认值)

7.CSS3提供了扩展背景样式

​ background-size : 背景图的尺寸大小
​ cover : 覆盖
​ contain : 包含
​ background-origin : 背景图的填充位置
​ padding-box (默认)
​ border-box
​ content-box
​ background-clip : 背景图的裁切方式
​ padding-box
​ border-box (默认)
​ content-box

注：复合样式的时候，第一个是位置，第二个是裁切

8.CSS3渐变

1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上

   注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。

2. 径向渐变 -> radial-gradient

9.字体图标

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

好处：

1. 可以非常方便的改变大小和颜色
   font-size color
2. 放大后不会失真
3. 减少请求次数和提高加载速度
4. 简化网页布局
5. 减少设计师和前端工程师的工作量
6. 可使用计算机没有提供的字体

使用：
@font-face语法

像.woff等文件都是做兼容平台处理的, mac、linux等。

阿里图标库https://www.iconfont.cn/

添加到我的项目里后本地下载，将除了demo以外的文件复制到项目中

可在demo网页里查看使用方式