CSS3 动画属性 —— Animation
@keyframes规则和animation属性:
@keyframes: | 规定动画 |
---|---|
animation: | 所有动画属性的简写属性,除了animation-play-state属性。 |
animation-name: | 规定@keyframes动画名称。 |
animation-duration: | 规定动画完成一个周期所花费的秒或毫秒。默认是0。 |
animation-timing-tunction: | 规定动画的速度曲线。默认是ease。 |
animation-delay: | 规定动画何时开始。默认是0。 |
animation-iteration-count: | 规定动画被播放的次数。默认是1。 |
animation-direction: | 规定动画是否在下一周期逆向地播放。默认是normal。 |
animation-play-state: | 规定动画是否在运行或暂停。默认是running。 |
animation-fill-mode: | 规定对象时间之外的状态。 |
CSS3 过渡 —— Transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
属性 | 描述 |
---|---|
transition: | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property: | 规定应用过渡的CSS属性的名称。 |
transition-duration: | 定义过渡效果话费的时间。默认是0。 |
transition-timing-function: | 规定过渡效果的时间曲线。默认是”ease”。 |
transition-delay: | 规定过渡时间何时开始。默认是0。 |
div{
width:100px;
height:100px;
background-color:yellow;
transition:width 2s, height 2s,
}
CSS3 转换 —— Transform
属性 | 描述 |
---|---|
transform: | 向元素应用 2D 或 3D 转换。 |
transform-origin: | 允许改变被转换元素的位置。 |
transform-style: | 规定被嵌套元素如何在 3D 空间中显示。 |
none: | 定义不进行转换。 |
translate(x,y): | 定义 2D 转换。 |
translate3d(x,y,z): | 定义 3D 转换。 |
scale(x,y): | 定义 2D 缩放。 |
scale3d(x,y,z): | 定义 3D 缩放。 |
rotate(angle): | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle): | 定义 3D 旋转。 |