八.CSS之animation(动画)

html-css06

八.CSS之animation(动画),第1张

过渡（transition）

​多个属性间使用,隔开

​如果所有属性都需要过渡，则使用all关键字

​大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）

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

指定过渡的执行的方式

可选值：

transition-delay: 2s

可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。

关键帧语法：

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

animation-name: test

animation-duration: 4s

animation-delay: 2s

可选值：

可选值：

可选值：

可选值：

animation: test 2s 2 1s alternate 和transition 的简写类似 ，执行时间和延时时间顺序注意

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

变形不会影响到页面的布局

transform 用来设置元素的变形效果

transform: translateY(-100px)

平移：平移元素，百分比是相对于自身计算的(px,100%)

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果

, 必须要设置网页的视距

/* 设置当前网页的视距为800px，人眼距离网页的距离 */

perspective: 800px

通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显

rotateX()

rotateY()

rotateZ()

单位 角度 deg、 n turn（圈）

**是否显示元素的背面 **

backface-visibility: hidden

一、指代不同

1、animation ：属性是一个简写属性，用于设置六个动画属性。

2、transition：属性是一个简写属性，用于设置四个过渡属性。

二、特点不同

1、animation ：animation: name duration timing-function delay iteration-count direction规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间，以秒或毫秒计。

2、transition：transition: property duration timing-function delay规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。

三、要求不同

1、animation ：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

2、transition：始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

参考资料来源：百度百科- CSS3

参考资料来源：百度百科-CSS语法