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;