CSS动画相关

1.transition动画过渡属性

  • transition-property 设置过渡属性
  • transition-duration 设置过渡时间,默认为0s
  • transition-timing-function 设置过渡效果函数
  • transition-delay 设置过渡效果延迟执行时间

2.animation动画属性

  • -webkit-animation-name 设置动画的名称
  • -webkit-animation-duration 设置动画的持续时间
  • -webkit-animation-timing-function 设置动画的缓动效果函数
  • -webkit-animation-delay 设置动画的延迟执行时间
  • -webkit-animation-iteration-count 设置动画的循环播放次数,默认是1次
  • -webkit-animation-direction 设置动画效果是否反向运动
  • @keyframs 设置动画的关键帧
  • animation-play-state 设置动画暂停或者继续播放 running or pause

3.transform变形属性

  • translate(x,y) translateX(x) translateY(y)设置2d偏移
  • rotate(deg) 设置2d旋转
  • scale(x,y) scaleX(x) scaleY(y) 设置2d缩放
  • skew(x-deg,y-deg) skewX(x-deg) skewY(y-deg) 设置2d扭曲变形

4.box-shadow阴影属性

  • box-shadow:x y blur spread color inset 设置阴影

5.渐变色

  • linear-gradient(direction,startColor,centerColor position,endColor) 设置线性渐变
  • linear-gradient(deg,startColor,endColor) 设置角度渐变
  • radial-gradient(startColor,endColor) 设置径向渐变
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,314评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,751评论 0 2
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,631评论 0 7
  • 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。· elemen...
    lovelydong阅读 479评论 0 2
  • 本文翻译自Medium,原作者是Adam Luptak,原文地址 我之前没认为他们会去这样做。需要强调的是,我很开...
    张嘉夫阅读 1,159评论 0 49