小熊奔跑动画（CSS3）

最新推荐文章于 2022-11-10 11:19:26 发布

开心市民小顾

最新推荐文章于 2022-11-10 11:19:26 发布

阅读量938

点赞数

分类专栏： #二级分类文章标签： css3

本文链接：https://blog.csdn.net/qq_45433707/article/details/104227893

版权

#二级分类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

动画（animation）是CSS3具有颠覆性的特征之一，可以设置多个节点来精确控制一个或一组动画。

一.基本使用

1.定义动画：
用@keyframes定义动画

@keyframes 动画名称{
	0%{
	width:100px;
}
	100%{
	width：200px;
}

2.使用调用动画：
调用动画
animation-name:动画名称；
持续时间
animation-duration：持续时间；

二.属性介绍

@keyframes:规定动画。
animation：所用动画属性简写，除了animation-play-state属性。
animation-name:规定动画@keyframes动画名称。
animation-duration：规定动画完成一个周期所花费时间，默认为零。
animation-tining-function：规定动画曲线，默认为ease。
animation-delay：动画何时开始，默认为0。
animation-iteration-count：规定动画播放次数，默认为0，还有infinite（无限）。
animation-direction:规定动画是否在下一周期逆向播放，默认“normal”，alternate逆向播放。
animation-play-state：规定动画是否正在运行或暂停，默认“running”，还有“pause”。
animation-fill-mode：规定动画结束后的状态，保持forwards,回到起始backwards。

三.小熊代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 420px;
            height: 420px;
            background: url("https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true") no-repeat;
            animation: bear 1s steps(7) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -2940px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

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

</html>

图片网址来自博客“周皮皮皮皮皮皮”；
https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true

开心市民小顾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小熊奔跑动画（CSS3）

动画（animation）是CSS3具有颠覆性的特征之一，可以设置多个节点来精确控制一个或一组动画。一.基本使用1.定义动画：用@keyframes定义动画@keyframes 动画名称{ 0%{ width:100px;} 100%{ width：200px;}2.使用调用动画：调用动画animation-name:动画名称；持续时间animation-durat...
复制链接

扫一扫

专栏目录