css3 动画animation

最新推荐文章于 2022-11-25 14:52:08 发布

shirlyran

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量102

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/shirlyran/article/details/107163963

版权

前言：相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用：
1. 制作动画
  1. 先定义动画
    1. 用kerframes定义动画（类似定义类选择器）
```
@keyframes 动画名称{
    0%{
        width:100px;
    }
    100% {
        width:200px;
    }
}
```
  2. 再使用（调用）动画

举例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 页面一打开，就有一个盒子从左跑到右 */
        /* 1.定义动画 */
        
        @keyframes move {
            /* from和to 等价于0%和100% */
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: #16ccec;
            /* 2.调用动画 动画名称 动画持续时间*/
            animation-name: move;
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

2.多个动画状态

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 里面的百分比要是整数 */
        /* 里面的百分比就是总的时间划分 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: #16ccec;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

3.动画的常用属性

3.1简写属性

注：

3.2animation-timing-function

注：steps（n）就是分n步来完成动画，有了steps就不用再写ease之类的了

shirlyran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 动画animation

前言：相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用：制作动画先定义动画用kerframes定义动画（类似定义类选择器） @keyframes 动画名称{ 0%{ width:100px; } 100% { width:200px; }} 再使用（调用）动画 ...
复制链接

扫一扫