• 技术文章 >web前端 >前端问答

    用什么实现css3动画效果

    长期闲置长期闲置2022-06-07 16:51:51原创234

    实现css3动画效果:1、利用“@keyframes”规则配合animation属性实现动画效果;2、利用transition过渡属性实现动画效果,语法为“元素{transition:属性名称 时间 速度曲线 delay}”。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    用什么实现css3动画效果

    一、是什么

    CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块

    即指元素从一种样式逐渐过渡为另一种样式的过程

    常见的动画效果有很多,如平移、旋转、缩放等等,复杂动画则是多个简单动画的组合

    css实现动画的方式,有如下几种:

    transition 实现渐变动画

    animation 实现自定义动画

    二、实现方式

    transition 实现渐变动画

    transition的属性如下:

    其中timing-function的值有如下:

    值 描述

    注意:并不是所有的属性都能使用过渡的,如display:none<->display:block

    举个例子,实现鼠标移动上去发生变化动画效果

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <div></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    </body>
    </html>

    输出结果:

    +1.gif

    animation 实现自定义动画

    animation是由 8 个属性的简写,分别如下:

    CSS 动画只需要定义一些关键的帧,而其余的帧,浏览器会根据计时函数插值计算出来,

    通过 @keyframes 来定义关键帧

    因此,如果我们想要让元素旋转一圈,只需要定义开始和结束两帧即可:

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

    from 表示最开始的那一帧,to 表示结束时的那一帧

    也可以使用百分比刻画生命周期

    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

    定义好了关键帧后,下来就可以直接用它了:

    animation: rotate 2s;

    三、总结

    transition(过度) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同

    transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”

    translate(移动) 只是transform的一个属性值,即移动

    animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性

    (学习视频分享:css视频教程

    以上就是用什么实现css3动画效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:css中上边距是什么属性 下一篇:css3中after的content属性里面都能放什么东西
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3中odd和even的用法是什么• css3能让图片倾斜吗• css3怎么设置动画旋转速度• css3怎么设置input不可编辑• css3怎么实现元素过渡效果
    1/1

    PHP中文网