CSS之过渡、转换、动画

74 阅读 0 评论 49 点赞

我是靠谱客的博主坚强钢铁侠，最近开发中收集的这篇文章主要介绍CSS之过渡、转换、动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.过渡

1. 什么是过滤？
概念：就是指元素从一个状态变为另一个状态的过程。
2. 如何实现过渡？
通过transition 属性来指定，它的语法格式为：
transition: 过渡属性持续时间运动曲线延迟时间;

3. 对于过渡而言，我们可以使用 transition 来简写，也可以把这个属性分开。
- transition-property：指定要用于过渡的属性名称，如：width、height、background、......
- transition-duration：过渡持续时间，单位是秒。
- transition-timing-function：过渡的的运行曲线，默认是 ease
- transition-delay：延迟执行时间，单位为秒

4. 使用
需求：当鼠标移到div上时，div变为圆形

5. 注意：添加过渡效果的代码需要放在你想要进行过渡的元素上。简单的说，就是希望那个元素有过渡效果就把代码加到那个元素上。

6. 如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可。

7. 运动曲线有哪些？
- ease：默认值，逐渐慢下来
- linear：匀速运动
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        #container {
            width: 1000px;
            height: 300px;
            border: 1px solid #cccccc;
        }
        .box {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 100px;
            background: blueviolet;
            transition: all 2s linear;
        }
        #container:hover .box {
            left: 300px;
            border-radius: 50%;
            background: deeppink;
        }
    </style>
</head>
<body>

2.转换之移动

1. 位移：使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置。
语法格式有：
transform: translate(x, y); // 在x坐标和 y坐标上移动
transform: translateX(n); // 只在x坐标上移动
transform: translateY(n); // 只在y坐标上移动

2. 使用示例

注意：
1. 当使用translate(x, y)时，x和y都可以指定正值或负值
如果x的值是正值，则往右移动，负值往左移动
如果y的值是正值，则往下移动，负值往上移动。
2. x和y轴的值要带单位，一般使用像素（px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之移动</title>
    <style>
        div {
            width: 100px;
            height: 75px;
            border: 1px solid black;
            background-color: #cccccc;
        }
        div#div2 {
            /*transform: translate(50px, 100px);*/
            transform: translateY(50px);
            transform: translateX(50px);
            background-color: green;
        }
    </style>
</head>
<body>
<div>床前明月光，</div>
<div id="div2">凝视地上霜。</div>
</body>
</html>

3.转换之2D旋转

旋转通过 transform： rotate()；来实现，（）中为旋转的度数，如：45度输入为45deg。

注意：默认情况下旋转是以元素的中心位置为旋转点来旋转的。如果想指定旋转的中心
点的位置，可以使用 transform-origin: x,y 来指定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之旋转</title>
    <style>
        .box {
            position: absolute;
            left: 200px;
            top:200px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;

            transform-origin: 10px 10px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.转换之3D旋转

与2D旋转一样，只需在 transform: rotate();中加入z轴的属性值就能实现。

5.动画

首先使用动画之前，需要通过 @keyframe 来定义动画，定义好动画后，通过 animation 属性来指定动画名称即可。

定义动画时，需要告诉它这个动画将如何安完成。
1. 开始状态 from ，也可以使用 % 百分比来指定
2. 结束状态 to

注意：要想元素具有动画效果，除了定义好动画并运用外，还需要给这个元素进行绝对定义。

animation是动画的简写方式，它里面有很多的属性。它的语法格式为：
animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

动画的名称 -- animation-name:
持续时间 -- animation-duration:
动画曲线 -- animation-timing-function:
延迟时间 -- animation-delay:
是否可以逆向播放 -- animation-direction:
默认是“normal“,动画执行到最后会直接加到开始处
alternate逆播放，动画执行到最后会反着播放。

动画执行总人数 -- animation-iteration-count:
次数可以是整数，也可以是 infinite 表示一直循环

动画的状态 -- animation-fill-mode:
有两个值可以指定：保持forwards，回到起始backwards

规定动画是否正在运行或暂停 -- animation-play-state:
这个需要单独使用，有两个值：
- running: 运行状态，默认值
- paused: 暂停状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: red;

            animation-name: move;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: 3;
            animation-direction: normal;
            animation-fill-mode: backwards;
        }
        .box:hover {
            /*animation: move 2s;*/
            animation-play-state: paused;
        }
        /*定义动画*/
        @keyframes move {
            /*from {
                left: 10px;
            }
            to {
                left: 100px;
            }*/
            0% {
                left: 10px;
            }
            100% {
                left: 400px;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

动画可与过渡、旋转合理的配合使用达到不同的效果。