CSS3动画
本讲内容
• CSS3 2D与3D变形 • CSS3过度属性 • CSS3动画
2D和3D变换属性
属性 transform transform-origin transform-style perspective perspective-origin backfac换相关属性 描述 HTML元素应用 2D 或 3D 转换 允许改变元素位置。 被嵌套元素如何在 3D 空间中显示。 3D 元素的透视效果。 3D 元素的底部位置。 定义元素在不面对屏幕时是否可见。
2D和3D变换属性
属性 Matrix(n,n,n,n,n,n) Martrix3d translate translate3D translateX/Y/Z scale scale3d scaleX/Y/Z rotate rotate rotateX/Y/Z skew
作业
• 1、向网页中添加各种动画，至少有一种 动画出现？
• 2、给自己的网页添加一些过渡效果？
计算机与信息工程系
计算机与信息工程系
动画属性
动画 从一种CSS效果变换成另一中CSS效果
属性 @keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state
transform变换函数
描述 2D变换，使用六个值的矩阵 3D变换，用16个值的4x4矩阵 2D变换 3D变换 轴变换 2D缩放变换 3D缩放变换 轴变换 2D旋转变换 3D旋转变换 轴旋转变换 沿着轴倾斜变换
过渡属性
过渡
元素从一个状态到另一个状态的变化
Transition属性 设置元素的过渡效果 transition: property duration timing-function delay;
动画属性
@keyframes格式 @keyframes animationname {keyframes-selector {css-styles;}}
Animationname是动画的名称 keyframes-selector动画时长百分比0-100%或from-to
css-styles 一个或多个CSS样式
Transition值及单个属性
值
描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay
定义 。
动画相关属性
描述 声明动画 简写，设置所有属性，除 animation-play-state 定义 @keyframes 动画的名称 动画持续时长，0无动画，秒或毫秒 速度曲线，linear, ease, ease-in, ease-out等 延迟动画，负值为跳过时间段 动画播放次数，infinite（无限次） 反向播放，normal, alternate(轮流反向播放) 动画状态，paused, running