css3动画学习笔记

原创
2018/08/01 14:11
阅读数 81

transition(过渡)

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。即创建补间动画

语法 transition: property duration timing-function delay;

  • transition-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 规定速度效果的速度曲线。
  • transition-delay 定义过渡效果何时开始。

transform(变形)

CSS3中的transform(变形)属性用于内联元素和块级元素,可以旋转、扭曲、缩放、移动元素,它的属性值有以下五个:

旋转 rotate
扭曲 skew
缩放 scale
移动 translate
矩阵变形 matrix

语法 transform:rotate(7deg)

  • none 定义不进行转换。
  • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
  • translate(x,y) 定义 2D 转换。
  • translate3d(x,y,z) 定义 3D 转换。
  • translateX(x) 定义转换,只是用 X 轴的值。
  • translateY(y) 定义转换,只是用 Y 轴的值。
  • translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
  • scale(x[,y]?) 定义 2D 缩放转换。
  • scale3d(x,y,z) 定义 3D 缩放转换。
  • scaleX(x) 通过设置 X 轴的值来定义缩放转换。
  • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
  • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
  • rotate(angle) 定义 2D 旋转,在参数中规定角度。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
  • skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
  • perspective(n) 为 3D 转换元素定义透视视图。

animation(动画)

简写属性形式 .box { animation: dropdown 8s linear 10s infinite reverse forwards; }

  • [animation-name] = dropdown //动画的名称
  • [animation-duration] = 8s //持续时间
  • [animation-timing-function] = linear //动画的播放速度曲线
  • [animation-delay] = 10s //延迟时间
  • [animation-iteration-count] = infinite //播放次数
  • [animation-direction] = reverse //播放顺序
  • [animation-fill-mode] = forwards//播放前或停止后设置相应样式

动画名称 (animation-name)

定义关键帧(keyframes) - 定义动画在不同阶段的状态。

@keyframes dropdown {
    0%{margin-top:0px;}
    10%{margin-top:0px;}
    50%{margin-top:100px;}
    60%{margin-top:100px;}
    90%{margin-top:200px;}
    100%{margin-top:200px;}
}

动画周期时长 (animation-duration)

指定一个动画周期的时长,默认值为0s,表示无动画

时间函数(animation-timing-function)

属性定义了动画的播放速度曲线。

animation-timing-function = ease | ease-in | ease-out |ease-in-out | linear | cubic-bezier(number,number,number,number)

动画延迟 (animation-delay)

定义了动画是从何时开始播放,该值以秒(s)或毫秒(ms)为单位

animation-delay = 3s

动画迭代次数 (animation-iteration-count)

定义动画播放的次数,默认值是一次

animation-iteration-count = infinite | number

动画是否反向播放 (animation-direction)

定义动画是否反方向播放

animation-direction = normal | reverse | alternate | alternate-reverse

播放前或停止后设置相应样式 (animation-fill-mode)

动画执行之前和之后如何给动画的目标应用样式

animation-fill-mode = none | forwards | backwards | both

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部