CSS3 transition动画、transform变换、animation动画

时间 2019-11-12

标签 css3 css transition 动画 transform 变换 animation 栏目 CSS 繁體版

原文原文链接

1、CSS3 transition动画

transition能够实现动态效果，其实是必定时间以内，一组css属性变换到另外一组属性的动画展现过程。css

属性参数：html

一、transition-property 设置过渡的属性，好比：width height background-color
二、transition-duration 设置过渡的时间，好比：1s 500ms
三、transition-timing-function 设置过渡的运动方式css3

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
- 好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/

四、transition-delay 设置动画的延迟
五、transition: property duration timing-function delay 同时设置四个属性app

举例：

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

2、CSS3 transform变换

css3引入了一些能够对网页元素进行变换的属性，好比旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性，transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，若是将一个元素旋转45度，它其实是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。动画

属性参数：网站

一、translate(x,y) 设置盒子位移
二、scale(x,y) 设置盒子缩放
三、rotate(deg) 设置盒子旋转
四、skew(x-angle,y-angle) 设置盒子斜切
五、perspective 设置透视距离
六、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
七、translateX、translateY、translateZ 设置三维移动
八、rotateX、rotateY、rotateZ 设置三维旋转
九、scaleX、scaleY、scaleZ 设置三维缩放
十、tranform-origin 设置变形的中心点
十一、backface-visibility 设置盒子背面是否可见3d

举例：（翻面效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

3、CSS3 animation动画

transition只能从一组css属性变成另外一组css属性。animation则能够在多组属性之间变换。transition必须使用触发器触发，animation可使用触发器，也能够在页面加载完成的时候自动触发。code

属性参数：orm

一、@keyframes 定义关键帧动画
二、animation-name 动画名称
三、animation-duration 动画时间
四、animation-timing-function 动画曲线htm

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数

五、animation-delay 动画延迟
六、animation-iteration-count 动画播放次数 n|infinite
七、animation-direction

normal 默认动画结束不返回
Alternate 动画结束后返回

八、animation-play-state 动画状态

paused 中止
running 运动

九、animation-fill-mode 动画先后的状态

none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用

十、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例：（人物走路动画）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

动画中使用的图片以下：