CSS3过渡,不再为JS动画而犯愁

HTML5学堂:在页面开发中经常会借助JS来书写大量的特效,以获得较好的页面感官效果。但是真正到了使用JS来操作的时候,往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响,我们今天就来尝试下不借助任何JS,转而使用CSS3过渡来书写出更好的动画效果。

本文主要内容

一、Transition是什么

二、Transition的语法

三、Transition的属性值

四、Transition的使用

五、总结

一、Transition是什么

W3C标准中对CSS3的transition是这样描述的:“CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

在实际的开发中,经常会遇到手机上的JS动画卡顿现象,所以需要借用其他办法来替代使用,而CSS3的过渡就可以很好的解决这个问题,一起来看吧~~~

二、Transition的语法

下面同样从其语法和属性值开始一步一步来学习transition的具体使用。

  1. transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;

transition主要包含四个属性值:

1、执行变换的属性:transition-property

2、变换延续的时间:transition-duration

3、在延续时间段,变换的速率变化:transition-timing-function

4、变换的延迟时间:transition-delay

下面继续来看看这四个属性值的具体使用吧~

三、Transition的属性值

1、transition-property

语法:transition-property: none | all | indent;

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:

  1. none(没有属性改变);
  2. all(所有属性改变)这个也是其默认值;
  3. indent(元素属性名)。

当其值为none时,transition马上停止执行;当指定为all时,则元素产生任何属性值变化时都将执行transition效果;ident是可以指定元素的某一个CSS属性值。

常规的元素宽高、颜色等CSS属性变化都可以触发transition效果。但是需要提醒一点,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。

2、transition-duration

语法:transition-duration: time;

transition-duration是用来指定元素转换过程的持续时间。

取值:time为数值,单位为s(秒)或者ms(毫秒)。其默认值是0,也就是变换时是即时的。

可以作用于所有元素,包括:before和:after等伪元素。

3、transition-timing-function

语法:transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;

transition-timing-function的值允许根据时间的推进去改变属性值的变换速率,有如下几个可能的取值:

  1. ease:逐渐变慢(默认值);
  2. linear:匀速;
  3. ease-in:加速;
  4. ease-out:减速;
  5. ease-in-out:加速然后减速。

4、transition-delay

语法:transition-delay: time;

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后等待多少时间后才开始执行transition效果。

取值:time为数值,单位为s(秒)或者ms(毫秒)。默认大小是0,也就是变换立即执行,没有延迟。

其使用和transition-duration极其相似,可以作用于所有元素,包括:before和:after等伪元素。

5、书写方式

有时不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。

但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的值为transition-duration,第二个为transition-delay。具体书写方式如下:

  1. transition: background 5s ease 2s,
  2. width 3s ease-in 2s;

如果想给所有元素的属性执行transition效果,那么还可以利用all属性值来操作,此时它们共享同样的延续时间以及速率变换方式,如:

  1. transition: all 5s ease 0.3s;

综合上述,可以给transition一个速记法:transition: "property" "duration" "animation type" "delay";如下图所示:

四、Transition的使用

通过上面,大家对CSS3的Transition属性已经有了一定的概念,下面为了加强在这方面的使用,一起来看下面的DEMO。通过实践来巩固前面的理论知识,也通过实践来加强transition的记忆。

下面的案例主要是在一个div中放置了几个小块,分别是对应了transition-timing-function中的几种类型,然后在div的hover状态下,改变其部分属性,从而达到一种动画效果。

首先把相应的结构代码搞定~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3的过渡</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">


    </style>
</head>
<body>
    <!-- 案例的结构 -->
    <div class="wrap clearfix">
        <div class="timings-demo">
            <div class="demo-box ease">HTML5学堂-码匠</div>
            <div class="demo-box ease-in">HTML5学堂-码匠</div>
            <div class="demo-box ease-out">HTML5学堂-码匠</div>
            <div class="demo-box ease-in-out">HTML5学堂-码匠</div>
            <div class="demo-box linear">HTML5学堂-码匠</div>
        </div>
    </div>
</body>
</html>

接下来,给对应的模块加上相应的CSS样式,从而实现完整的一个过渡效果,如下:

.timings-demo {
    width: 460px;
    height: 400px;
    margin: 50px auto;
    padding: 10px;
    border: 1px solid #ccc;
}
.demo-box {
    width: 150px;
    height: 50px;
    margin-bottom: 30px;
    background: #96c;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
}
/*ease效果:*/
.ease {
    background: #f36;
    transition: all 5s ease 0.3s;
}
/*ease-in效果:*/
.ease-in {
    background: #369;
    transition: all 3s ease-in 0.5s;
}
/*ease-out效果:*/
.ease-out {
    background: #636;
    transition: all 5s ease-out 0s;
}
/*ease-in-out效果:*/
.ease-in-out {
    background: #3e6;
    transition: all 2s ease-in-out 2s;
}
/*linear效果:*/
.linear {
    background: #999;
    transition: all 6s linear 0s;
}
/*hover状态下demo-box产生属性变化*/
.timings-demo:hover .demo-box {
    height: 30px;
    margin: 20px 0 40px 280px;
    border: 1px solid rgba(255,230,255,08);
    background: #39f;
    line-height: 30px;
    transform: rotate(360deg) scale(1.2);
    border-radius: 25px;
}

最后,其效果图如下:

五、总结

那么今天关于CSS3的Transition就简单的介绍到这里,需要掌握的就是CSS3中Transition的属性值,上文提到的 "property" "duration" "animation type" "delay"

最后提醒一句,因为Transition是CSS3的属性,所以在书写的时候需要加上相应的内核前缀

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

自学DIV+CSS总结

1、CSS有四种控制方式:行内样式、内嵌式、链接式、导入式(优先级从高到低) 2、CSS选择器有:标记选择器(p、ul、a、li、img、span、input、...

2606
来自专栏前端说吧

小程序 - 效果处理之技巧合集(更新中...)

4739
来自专栏小狼的世界

如何让高度、宽度不定的容器保持水平、垂直居中

这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上...

972
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

2812
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-3 文字的绘制

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

1502
来自专栏前端新视界

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点。没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风...

19710
来自专栏不会写文章的程序员不是好厨师

全栈第一步-CSS基础前言CSS基础总结

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

882
来自专栏大数据钻研

CSS基础

CSS基础 CSS基础知识 选择器(重要!!!) 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础...

3165
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

842
来自专栏极客慕白的成长之路

50道CSS基础面试题

1415

扫码关注云+社区