CSS第七篇——CSS3(3)

CSS第七篇——CSS3(3)

CSS3 3D 转换

就是可以在xyz三个方向上做一些操作

div
{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
  -moz-transform: rotateY(130deg);    /* Firefox */
}

其他的还有scale translate都可以在三个方向上进行。

CSS3 过渡

css3过渡是css3中比较重要的一节，通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

它如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

应用于宽度属性的过渡效果，时长为 2 秒：

div{
  transition: width 2s;
  -moz-transition: width 2s;    /* Firefox 4 */
  -webkit-transition: width 2s;    /* Safari 和 Chrome */
  -o-transition: width 2s;    /* Opera */
}

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

实例
向宽度、高度和转换添加过渡效果：

div{
  transition: width 2s, height 2s, transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -o-transition: width 2s, height 2s,-o-transform 2s;
}

transition属性是以下几个属性的简写：

属性	描述
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始(延时开始的时间)。默认是 0。

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3动画: animation: 动画名 动画时间

• 第一步我们定义动画名和动画内容：
• 第二步确定动画animation属性

@keyframes myfirst{
  from {background: red;}
  to {background: yellow;}
}

@keyframes myfirst1{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

div
{
  animation: myfirst 5s;
}

CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：

animation | 所有动画属性的简写属性，除了 animation-play-state 属性。

属性	描述
@keyframes	规定动画。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

简写

div
{
  animation: myfirst 5s;
}

比如说我们想动画结束后保留到最终的状态

.box{
    animation: myfirst 5s forwards;
  }
/* 其实就是animation-fill-mode的属性值 */

animation-fill-mode的值详解

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

附：
推荐一个常用的css3动画库，基本能搞定工作中90%常用的动画！https://daneden.github.io/ani... (需要翻墙哦!)
更多文章请关注微信公众号：认真学前端