美文网首页
CSS3关键帧动画小记

CSS3关键帧动画小记

作者: 邢泽川 | 来源:发表于2016-08-02 21:58 被阅读86次

    简介

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果,keyframes关键帧动画是我们常用的添加动画的方式。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <style type="text/css">
    
        /*关键帧:keyframes*/
    
        /* 使用关键帧动画就三步:1.定义动画  2.调用动画  3.配置动画 */
        
        /*第一步:定义动画,用@keyframes 定义一个动画效果,后边紧跟该动画效果的名字,通过名字来调用这个动画*/
        @keyframes myAnimation {
            
            /*from {
    
            }
    
            to {
    
            }只能设置起点和终点*/
        
        /*通过关键字或百分比来设置关键帧的时间*/
        /*在大括号中设置关键帧状态的属性,多个属性之间使用“;”分隔。前后状态的属性要一致*/
            0% { width: 100px; height: 100px }
            /*0%不是动画的初始状态,div的状态才是初始状态*/
    
            100% { width: 500px; height: 500px }
        }
    
        /*关键帧动画为了防止部分浏览器无法执行,需要添加私有前缀;-webkit-*/
        @-webkit-keyframs myAnimation {
    
        }
    
        /*第二部:调用关键帧动画*/
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            /*调用*/
            /*选中关键帧动画名称(必选项)*/
            animation-name: myAnimation;
            -weblit-animation-name: myAnimation;
    
            /*设置动画执行时间(必选项)*/
            animation-duration: 10s;
            -webkit-animation-duration: 10s;
    
        /*第三部配置关键帧动画*/
            /*设置动画执行的时间函数(运动速率变化曲线)(可选)*/
            animation-timing-function: ease;
            -webkit-animation-timing-function: ease;
    
            /*设置动画延迟执行的时间(可选)*/
            animation-delay: 2s;
            -webkit-animation-delay: 2s;
    
            /*设置动画执行次数:具体数字表示让动画执行指定次数,infinite无限次数,(可选)*/
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
    
            /*设置动画执行方向:向前(默认,normal:从0到100%) 、来回执行(0-100%-0)(可选)*/
            animation-direction: alternate;
            -webkit-animation-direction: alternate;
    
            /*设置动画执行结束后,保留最后一帧的样式 (可选)*/
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
    
            /*上面的写法比较麻烦,关键帧动画可以使用集合属性来书写*/
            -webkit-animation: myAnimation 10s ease 2s infinite alternate forwards;
            -o-animation: myAnimation 10s ease 2s infinite alternate forwards;
            animation: myAnimation 10s ease 2s infinite alternate forwards;
        }
    
        </style>
    </head>
    <body>
    
        <div></div>
        
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:CSS3关键帧动画小记

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