本文共 2134 字，大约阅读时间需要 7 分钟。

---

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。

学习资料来源于：尚硅谷

---

过渡 ※

• 通过过渡可以指定一个属性发生变化时的切换方式
• 通过过渡可以创建一些非常好的效果，提升用户的体验

transition-property 指定要执行过渡的属性 。多个属性间使用,隔开

如果所有属性都需要过渡，则使用all关键字。大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。

transition-duration: 指定过渡效果的持续时间

时间单位：s 和 ms 1s = 1000ms

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 。

transition-timing-function: 过渡的时序函数，指定过渡的执行的方式

可选值： ease 默认值，慢速开始，先加速，再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速 后减速 对于animation也适用，即animation-timing-function

---

动画 ※

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，比如上例设置的.box1:hover div。动画可以自动触发动态效果。

设置动画效果，必须先要设置一个关键帧@keyframes，关键帧设置了动画执行每一个步骤。

animation-name: 要对当前元素生效的关键帧的名字

animation-duration: 动画的执行时间

animation-delay： 动画的延时

animation-timing-function：过渡的时序函数，指定过渡的执行的方式

可选值： ease 默认值，慢速开始，先加速，再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速 后减速

animation-iteration-count 动画执行的次数

可选值： 次数 infinite 无限执行

animation-direction：指定动画运行的方向

可选值： normal 默认值 从 from 向 to运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to运行 重复执行动画时反向执行 alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

animation-play-state: 设置动画的执行状态

可选值： running 默认值 动画执行 paused 动画暂停

animation-fill-mode: 动画的填充模式

可选值： none 默认值 动画执行完毕元素回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延时等待时，元素就会处于开始位置 both 结合了forwards 和 backwards

例：

---

变形 ※

变形就是指通过CSS来改变元素的形状或位置

- 变形不会影响到页面的布局 - transform 用来设置元素的变形效果 - 可选值： translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移 - 平移元素，百分比是相对于自身计算的

例：

    
       
       
               
   
    
   
    
   
    aaaa
   
    
   
    
   

---

z轴平移

---

旋转 ※

transform 还可以用来设置元素的旋转效果

通过旋转可以使元素沿着x y 或 z旋转指定的角度 rotateX() rotateY() rotateZ()

而且旋转和平移可以一起使用。

如：transform: translateZ(400px) rotateY(180deg) ;

---

缩放 ※

转载地址：http://doyki.baihongyu.com/