CSS动画总结

七、CSS动画

1、过渡

  • transition:过渡,通过过渡可以指定一个属性发生变化时的切换方式。通过过渡可以创建一些非常好的效果,提升用户体验。

  • transition-property: 指定要执行过渡的属性,多个属性之间用 ,隔开。如果所有属性都需要过渡,则使用all关键字。大部分属性都支持过渡,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

  • transition-duration: 指定过渡效果的持续时间,时间单位 s 和 ms,1s=1000ms

  • transition-timing-function: 过渡时序函数,指定过渡的执行方式。可选值:
    ease:默认值,慢速开始,先加速,再减速
    linear:匀速运动
    ease-in:加速运动
    ease-out:加速运动
    ease-in-out:先加速后减速
    cubic-bezier():贝赛尔曲线,指定时序函数,通过https://cubic-bezier.com可自动生成。
    steps():分步执行过渡效果,可以为其设置两个值。
    第一个值为整数,表示步数
    第二个值
    start:在时间开始时执行过渡
    end:在时间结束时执行过渡

  • transition-delay:过渡效果的延迟,等待一段时间后再执行过渡

注意:
使用transition可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则第一个时间表示过渡时间,第二个时间表示延迟时间。

       .box1{
            width: 800px;  height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;  height: 100px;
            margin-bottom: 100px;
            margin-left: 700px;
        }
        .box2{
            background-color: #bfa;
            transition: all 0.5s;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: steps(3,end);
            transition-delay: 2s;
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover div{
            margin-left: 0px;
        }
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
过渡.gif

2、动画

动画和过渡类似,都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才能触发,动画可以自动出发动态效果。设置动画效果,必须使用@keyframes设置一个关键帧,关键帧设置了动画执行的每一个步骤

        @keyframes test{
            /* from表示动画的开始位置 */
            from{
                margin: 0;
                background-color: darkkhaki;
            }
            /* to表示动画的结束位置 */
            to{
                margin-left: 700px;
                background-color: darkorange;
            }
        }

可以为@keyframes添加断点使得从from到to分为多个阶段执行

        @keyframes falling{
            from{
                margin-top: 0;
            }
            50%{
                margin-top: 100px;
            }
            75%{
                margin-top: 200px;
            }
            to{
                margin-top: 300px;
            }
        }
  • animation-name:要对当前元素生效的关键帧的名字

  • animation-duration:动画的执行时间

  • 同样可以为动画设置延时和贝赛尔曲线

    animation-delay: 2s;
    animation-timing-function: steps();
    
  • animation-iteration-count:动画执行次数,可选值:整数infinite无限次

  • animation-direction:指定动画运行的方向,可选值:
    normal:默认值,每次都从from到to运行
    reverse:每次从to到from运行
    alternate:从from向to运行,重复执行动画反向执行
    alternate-reverse:从to向from运行重复执行动画时反向执行

  • animation-play-state:设置动画的执行状态,可选值:
    running默认值,动画执行
    paused动画暂停
    此属性可结合hover一起使用

  • animation-fill-mode:动画的填充模式,可选值:
    none默认值,动画执行完毕元素回到原来的位置
    forwards动画执行完毕元素会停止在动画结束的位置
    backwards动画等待延时时,元素就处于开始状态,即满足开始状态的所有属性
    both结合了forwards和backwards的属性,即等待时处于开始状态,结束时停在结束位置

        .box1{
            width: 800px; height: 800px;
            background-color: darkgrey;
        }
        .box1 div{
            width: 100px; height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
        }
        .box2{
            background-color: #bbffaa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-play-state: running;
            animation-fill-mode: both;
        }
        @keyframes test{
            from{
                margin: 0;
                background-color: darkkhaki;
            }
            to{
                margin-left: 700px;
                background-color: darkorange;
            }
        }
    <div class="box1">
        <div class="box2">
        </div>
    </div>
动画.gif

3、变形

变形是指通过css来改变元素的形状或位置,不会影响到页面的布局。使用transform用来设置元素的变形效果。

(1)平移

translateX()沿着x轴方向平移
translateY()沿着y轴反向平移
translateZ()沿着z轴反向平移

平移元素时
向上为负值,向下为正值
向左为负值,向右为正值
向前为正值,向后为负值

若写百分数表示相对于元素自身大小的百分比移动

.box4:hover{
  transform: translateY(-5px);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
<div class="box4"></div>
变形.gif

z轴平移,调整元素在z轴的位置,正常情况是调整元素和人眼之间的距离。距离越大,元素离人越近。z轴平移属于立体效果(近大远小)默认情况下网页不支持透视,如果需要看见效果,必须要设置网页的视距。
使用perspective属性来设置网页的视距,一般设置为800px到1200px之间。

        html{
            perspective: 800px;
        }
        body{
            height: 500px; width: 500px;
            margin: 0 auto; border: 1px solid red;
        }
        .box1{
            width: 200px; height: 200px;
            background-color: #bbffaa;
            margin: 150px auto;
            transition: 0.3s;
        }
        body:hover .box1{
            transform: translateZ(100px);
        }
<div class="box1"></div>
Z轴平移.gif
(2)旋转

通过旋转可以使元素沿着x,y,z轴旋转指定的角度:rotateX()rotateY()rotateZ()
可选值:度数:rotateX(45deg),圈数:rotateY(.25turn)。

使用backface-visibility属性来设置是否显示元素背面。可选值:
visible默认值,显示背面
hidden不显示背面

        html{
            perspective: 800px;
        }
        .box{
            width: 600px; height: 250px;
            margin: auto; border: 1px solid red;
        }
        .box1{
            width: 552px; height: 212px;
            background-image: url(./img/1.gif);
            margin: auto;
            transition: 1s;
        }
        .box:hover .box1{
            transform: translateZ(100px) rotateY(180deg);
            backface-visibility: visible;
        }
    <div class="box">
        <div class="box1"></div>
    </div>
旋转.gif
(3)缩放

变形原点默认是中点,也可以指定原点的位置

对元素进行缩放的函数
scaleX()水平方向缩放
scaleY()垂直方向缩放
scale()双方向缩放

通过这个属性可以为图片设置鼠标移入放大效果

        .box1{
            width: 100px;height: 100px;
            background-color: #bbffaa;
            margin: 100px auto;
            transition: 1s;
            transform-origin: 0 0;
        }
        .box1:hover{
            transform: scale(2);
        }
<div class="box1"></div>
缩放.gif
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容