CSS3动画之transition与animation详解

最新推荐文章于 2021-11-26 21:50:40 发布

Z忽忽

最新推荐文章于 2021-11-26 21:50:40 发布

阅读量528

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42158115/article/details/82416502

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为在项目中经常使用到transition，而且在学习vue过程也有transition过渡，因此在这里着重了解一下：

W3C的官方文档中是这样阐述transition的：CSS的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

一、语法

transition: property duration timing-function delay

transition属性是个复合属性，它包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间

默认值分别为：all 0 ease 0

注：transition-duration 时长为0，不会产生过渡效果

一、transition-property:

transition-property: none |all |property;

值为none时，没有属性会获得过渡效果，值为all时，所有属性都将获得过渡效果，值为指定的css属性应用过渡效果，多个属性用逗号隔开。

二，transition-duration

transition-duration：time;

该属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间

三，transition-timing-function

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

注意：值cubic-bezier(n,n,n,n)可以中定义自己的值，如 cubic-bezier(0.42,0,0.58,1)

四，transition-delay

这个属性没什么说的了，就是过渡效果开始前的延迟时间，单位秒或者毫秒

下面展示一个利用transition和transform结合实现一个3d导航栏的例子

<body>
    <ul class = "nav">
        <li>
            <span>电子工程学院</span>
            <span>西安电子科技大学</span>
        </li>
        <li>
            <span>通信工程学院</span>
            <span>西安电子科技大学</span>
        </li>
        <li>
            <span>微电子学院</span>
            <span>西安电子科技大学</span>
        </li>
        <li>
            <span>人文学院</span>
            <span>西安电子科技大学</span>
        </li>
        <li>
            <span>经济管理学院</span>
            <span>西安电子科技大学</span> 
        </li>
        <li>
            <span>计算机学院</span>
            <span>西安电子科技大学</span>
        </li>
    </ul>
</body>

body{
    margin:0;
    padding:0;
    font-family:'微软雅黑';
    background:#F7F7F7;
}
.nav{
    height:40px;
    margin-top:50px;
    text-align:center;
    list-style:none;
}
li{
    width:140px;
    height:40px;
    float:left;
    text-align:center;
    line-height:40px;
    position:relative;
    margin-right:10px;
    transition:all 1s;
    transform-style:preserve-3d /*只有子盒子全部使用了transform是才能有用 */
}
li span{
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
}
li span:last-child{
    background:yellow;
    transform:translateZ(20px)
}
li span:first-child{
    background:blueviolet;
    transform:rotateX(90deg) translateZ(20px)
}

li:hover{
    transform:rotateX(-90deg)
}

效果如图：

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例：animation: myanimation 2s linear 1s infinite forwards;

animation 属性是一个简写属性，用于设置动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-name 动画名称

animation-duration 动画指定需要多少秒或毫秒完成
值：time 默认值为 0，意味着没有动画效果

animation-timing-function 设置动画如何完成一个周期
值：linear 匀速
ease 先慢后快，结束前变慢默认
ease-in   低速开始
ease-out  低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay 动画在启动前的延迟间隔
值：time 默认值为 0

animation-iteration-count 动画的播放次数
值：n 一个数字，定义播放多少次动画默认值1
infinite 动画无限次播放

animation-direction   是否轮流反向播放动画
值：normal 正常
reverse   反向播放
alternate   在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
alternate-reverse 在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

animation-fill-mode 当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
值：none 默认，播放完动画后，画面停在起始位置
forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
both 设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

animation-play-state 动画是否正在运行或已暂停
值：paused 指定暂停动画
running 指定正在运行的动画，默认

initial 设置属性为其默认值

inherit 从父元素继承属性

Z忽忽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画之transition与animation详解

因为在项目中经常使用到transition，而且在学习vue过程也有transition过渡，因此在这里着重了解一下：W3C的官方文档中是这样阐述transition的：CSS的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition主要包含四个属性值：执行...
复制链接

扫一扫

专栏目录