CSS3总结系列1

过渡

通过改变CSS属性,它提供了一种控制动画速度的方式.属性改变没有立刻结束,而是需要一定的时间.你可以直接列出哪些属性需要进行动画过渡,可以设置when--delay,how long-duration,how--timing function等等.

有哪些属性可以参与动画和过渡

这里是mdn上的一个列表,这个列表里面的属性可以被过渡也可以被动画.谈及一点,auto属性值最好不要用,不同浏览器的实现不太一样,这里是一个CSS3transition demo.

定义过渡的CSS属性

类似于动画,过渡也可以使用简短的过渡属性用来配置过渡,同时也使得过渡操作变得更容易,摆脱列表属性全同步困难的束缚: transition-property,transition-delay,transition-duration,transition-timing-function.

过渡结束的监听

类似于animationend,transitionend,webkitTransitionEnd事件会在过渡结束时被触发,该事件提供两个属性:字符串propertyName, 浮点数elapsedTime,单位秒,不受transition-delay影响.

el.addEventListener("transitionend", updateTransition, true);

各个属性值列表长度不等时如何处理

//repeat
.transition1 {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s;
}
//equivalents to
.transition1 {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s, 3s, 5s;
}

//truncate
.transition2 {
    transition-property: width, height;
    transition-duration: 1s, 2s, 3s, 4s;
}
//dealt to be
.transition2 {
    transition-property: width, height;
    transition-duration: 1s, 2s;
}

这里略带提一下,CSS过渡和js控制过渡做对比的话,前者显得更和缓,js过渡要求更高的熟练度.最后分享一个有关transitions的译文

animation,transition,transform之间的比较

之前的一篇文章讲到animation,transform,今天主要讨论transition.发现前面都没怎么抓住重点,现在我得放放招.这里是我写的一个demo用来较为直观地作出比较.从demo里面可以看出:
1. animation
首先在要施加的动画元素上添加动画,可以是组合的方式:

animation: animating-paragragh 3s ease-in-out 1s infinite alternate;

也可以是分离的方式:

animation-name: animating-paragragph;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

两种方式都至少包括两项name和duration.想省代码的话就用简写的组合方式,没有必要严格遵守规定顺序(其实保持name(property) duration timing-function delay iteration-count direction这样的顺序好一些,可以更改但是duration和delay的顺序要保持不变,name的取名不要和其他属性值重复混淆.另外transform没有这样的组合属性值列表),然后动画主干在于关键帧@keyframes:

@keyframes animating-paragragh { 
  from {
      width: 500px;
      color: #b0a;
  }
  50% {
    width: 600px;
    color: #0f9;
  }
  to {
    width: 800px;
    color: #00c;
  }
}

动画原理在于timing-function,本质是三次贝塞尔Cubic Bezier速度曲线,linear和ease类都是其特殊情况(linear从头到尾速度不变;默认的ease以低速开始,然后加快,在结束前减速变慢;ease-in以低速开始,ease-out和ease-in-out类推,中间过程都没有像ease那样的加快,这里有个特别棒的w3school上的demo用来揭示这种区别.数学果然还是计算机技术的灵魂,有兴趣的可以课后去了解了解cubic-bezier.)
2. transition
transition的使用有别于animation,首先是声明transition属性,类似animation有组合式也有分离式,但是transition没有animation那么多的细分属性,只有property, duration, timing-function, delay.然后在hover的时候再给有关的transition-properties设定新值.
3. transform
分为2D和3D,它不像animation和transition,它既可以在hover的时候把过程表现出来,也可以直接展示转换后的结果,没有任何动画或者过渡.2D和3D的属性上有较多差别.转换是元素改变位置,尺寸,形状的一种效果.移动translate,旋转rotate,2d的平面倾斜skew,缩放scale,还有全力詹matrix(),matrix3d().这是zxx前辈的transform matrix文章,除了可以做到任何普通转换还可以镜像对称等等,要把matrix计算透也是蛮复杂的一件事,zxx前辈写的这篇文章很不错,IE矩阵滤镜,SVG,canvas都和矩阵相关,这货很有戏份.

• 2D
  transform,transform-origin属性,属性值当中的方法包括matrix(n, n, n, n, n, n),translate(x, y),translateX(x),translateY(y),scale(x, y),scaleX(n),scaleY(n),rotate(angle),skew(x-angle, y-angle),skewX(x-angle),skewY(y-angle)

有一点需要注意一下,单位px,deg等等比较容易遗忘.

• 3D
  3D相对2D更为复杂一些,有关transform的属性除去transform和transform-origin还有transform-style被嵌套元素如何在3D空间中显示,perspective3D元素的透视效果,perspective-origin3D元素的底部位置,backface-visibility定义元素在不面对屏幕时是否可见,w3school上面有很好的demo,transform的属性值相对2D而言,其中的方法有translate3d(x, y, z) translateX(x), translateY(y), translateZ(z),可见带上'3D性质',scale和rotate依此类推,还有个额外的persctive(n)方法用来定义3D转换元素的透视视图.

4. 综合比较

• animation和transition都带有过程性质,一般从初始状态到hover等事件触发的结束状态,hover后鼠标立即离开,都有相反动画或者相反过渡出现.讲到这个,我得谈谈animation-fill-mode,animation-play-state,之前没怎么介绍到,fill-mode表示动画结束时的状态,play-state是指动画运行状态.这里有一篇文章讲解地还行,还有一篇阮老师的文章,了解到一些新东西,animation keyframes之间的自动推算与平滑过渡,steps函数,transition无法由页面初始渲染出来(因为初末状态决定了transition的具体过渡过程,初始渲染没有确定末状态)等等...总体上讲得不错不过有些观点不太认同,比如说...一条transition规则，只能定义一个属性的变化，不能涉及多个属性...评论区比较杂还大多没有楼主回复与点赞反对功能,所以说还是自己思考为主,要想全面认识的话还是得多思考多实践多查阅不同的资料.

• 从这篇文章还有w3cplus上的一篇文章了解到除了hover等简单事件之外还可以通过jQuery或者原生js addClass removeClass这样类似的方式来控制动画与过渡.

• animation作用于元素本身,而不是样式属性,可用于动画的样式属性有很多,关键帧的使用使得动画控制可以很灵活,帧数越多动画细节控制得越好,但是若中间帧当中涉及需要进行动画属性变多的话,动画本身也会变得更复杂.

• transition关注的主体是样式属性property,而不是元素本身,需要过渡的属性在过渡之前就需要给出定义或者以组合的形式,所以说没有animation的关键帧那么自由,更简单实用些;transition属性值当中的种类也更少,和animation共有的duration,timing-function,delay.transition缺点主要在于灵活性降低.

• animation和transition都有animationEnd,transitionEnd等事件,所以都可以用js控制,但是这需要更高的熟练度和代码量,用得好会有很好的效果.

• transform更关注的渲染出的2D,3D效果,而不是过程.其实完全可以把transform划到animation名下,作为某一帧的一部分,只不过这个特殊属性作用于整个element.

5. 兼容性
就算不考虑日渐萎靡的IE,animation,transition,transform三者都推荐的做法:第一个属性加上webkit前缀,第二个不加,这样既能兼容像chrome29,safari8这样的PC端webkit系低版本(话说其实用chrome的人还会用29吗,早就更新成50了),还可以兼容Mobile端的Android Browser,UC Mobile等等。transform也一样,看了看Animate.css源码也确实是这样.
caniuse确实是个好东西,推荐你选中relative usage,会更有帮助.
6. 有关Animate.css
既然我现在在animation,transition,transform作出比较,那肯定有办法把三者的优势结合起来作出更简单更精彩更实用的动画.Animate.css便是这样的例子,它结合了animation和transform,没有transition没有派上用场因为transition与animation共存于一个element上面比较不容易控制,况且始末状态决定过程的transition没法做好复杂动画,只有一个个keyframes加上能做到精细控制速度曲线的cubic-bezier数学函数才有可能做好复杂动画.源码有3000多行并不算太多,但是作出的效果很有感觉,重点在于cubic-bezier的使用以及和transform各个属性的结合,以构成可以复用动画库.
Animate.css使用:

• 第一步

//firstly, you need to include this stylesheet in document's `<head>`
<head> 
    <link rel="stylesheet" href="animate.min.css">
<head>

• 第二步
  给需要进行动画的元素加上animated,有需要的话加上infinite等等.

<div class="animated inifinite">A block using Animate.css.</div>   

• 第三步
  加上'animation-name'

<div class="animated inifinite pulse">A block using Animate.css.</div>   

name列表:bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, faceIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, faceOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp.Animate.css还可以通过addClass方法动态添加
Animate.css相关动画样式,one方法检测animateEnd动画事件等等,来和jQuery结合使用.
另外Loaders.css是一个纯css加载类动画库,公司财务系统里面有关表格数据的刷新用上了它,用起来很方便,用户体验很棒.

CSS多背景

.multiple-backgrounds {
    background: bg1, bg2, ..., bgN;
}

之前没听过,竟然还有这东西,现在在mdn上看到...多个背景层是一层一层堆上去的,bg1放在最顶层,贴近屏幕,bgN放在最底层,远离屏幕,只有bgN才可以使用有效的background-color属性,其他层无效.background的每个子属性顺序是相互对应的.

.multi-bgs {
    width: 400px;
    height: 400px;
    background-image: url1, url2, linear-gradient(to right, #567, #fed);
    background-repeat: no-repeat repeat, repeat-y;
    background-position: bottom right, left, right;