css3核心模块

transition 过渡动画 transform 变型属性 animation 帧动画

transition-property 过渡属性 all|[attr]

transition-duration 过渡时间

transition-delay 延迟时间

transition-timing-function 运动类型 ease:(逐渐变慢)默认值 linear:(匀速) ease-in:(加速) ease-out:(减速) ease-in-out:(先加速后减速) cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://cubic-bezier.com/

2D转换:

transform rotate() 旋转函数 deg 度数 Transform-origin 旋转的基点

skew() 倾斜函数 skewX() skewY()

scale() 缩放函数 默认值是1 scaleX() scaleY()

translate() 位移函数 translateX() translateY()

animate声明关键帧:

关键帧——@keyframes 类似于flash 定义动画在每个阶段的样式,即帧动画 关键帧的时间单位 数字:0%、25%、100%等(设置某个时间段内的任意时间点的样式) 字符:from(0%)、to(100%)

格式 @keyframes 动画名称 { 动画状态 }

必要属性

animation-name 动画名称(关键帧名称)

animation-duration 动画执行时间

可选属性

animation-timing-function linear 匀速。 ease 缓冲。 ease-in 由慢到快。 ease-out 由快到慢。 ease-in-out 由慢到快再到慢。

cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

可选属性

animation-delay 动画延迟

animation-iteration-count 重复次数

animation-direction 动画运行的方向 normal | reverse | alternate | alternate-reverse animation-play-state 动画状态 running | paused animation-fill-mode 动画结束后的状态 none | forwards| backwards | both

3D转换

transform-style : flat | preserve-3d (3D空间展示) perspective 透视效果 transform:perspective(800px) 直接作用在子元素上 perspective-origin 透视点位置 transform 新增函数 translate3d( tx , ty, tz ) translateX() translateY() translateZ() rotate3d( rx , ry , rz,a) rotateX() rotateY() rotateZ() scale3d( sx , sy , sz) scaleX() scaleY() scaleZ()

原文地址:https://www.cnblogs.com/Lia-633/p/9811174.html