美文网首页
CSS3 - 过渡动画

CSS3 - 过渡动画

作者: Hyso | 来源:发表于2019-03-24 15:34 被阅读0次

设置哪些属性要参与到过渡动画中

transition-property: none|all|property;

none:没有属性会参与到过渡动画中
all:所有属性都会参与到过渡动画中
property:指定的属性会参与到过渡动画中。如指定宽和高参与到过渡动画中:transition-property: width, height;。

设置过渡动画的持续时间

transition-duration: time;

time:设置完成过渡效果需要花费的时间(以秒或毫秒计),如:transition-duration: 1s;。默认值是 0,意味着不会有效果。

设置过渡动画的延时执行时间

transition-delay: time;

time:设置过渡动画延时执行的时间(以秒或毫秒计),如:transition-delay: 1s;。默认值是 0,意味着不会有延时效果。

设置过渡动画的速度类型

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

linear:以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease:默认值。慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in:慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out:慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out:慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

示例

  • 示例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            border: 1px solid #EE3030;
            background-color: #EE3030;
            transition-property: all;
            transition-duration: 1s;
            transition-delay: 0.5s;
            transition-timing-function: linear;
        }

        .box:hover {
            width: 400px;
            height: 400px;
            background-color: #000000;
        }
</style>
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

以上过渡动画可简写为:

transition: all 1s 0.5s linear;
  • 示例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            border: 1px solid #EE3030;
            background-color: #EE3030;
            transition: width 1s linear, background-color 1s 0.3s linear, height 1s 1.2s linear;
        }

        .box:hover {
            width: 400px;
            height: 400px;
            background-color: #000000;
        }
</style>
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

相关文章

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • web前端-CSS3动画

    动画和过渡的异同 相同点过渡和动画都是给元素添加动画的过渡和动画都是CSS3新增的属性过渡和动画都需要满足三要素才...

  • Bootstrap 手册 07 - JS 组件篇

    1. 动画过渡 Transition Bootstrap 对一些组件默认使用过渡动画效果,这种效果是由 CSS3 ...

  • 九、CSS新特性

    CSS3过渡动画 1、transition-property 设置过渡的属性,比如:width height ba...

  • 动画

    过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影,圆角; 例题:transition :border-...

  • CSS3动画简要总结

    主要总结一下CSS3动画中这几块:transition(过渡),animation(动画),transform转换...

  • css动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

网友评论

      本文标题:CSS3 - 过渡动画

      本文链接:https://www.haomeiwen.com/subject/kjbrvqtx.html