CSS的动画效果

动画效果

语法: 创建动画:@keyframes 调用动画:animation

animation参数值

|---------------------------|--------------------------------------------|
| 参数值 | 效果 |
| animation-name | 规定 @keyframes动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease" |
| animation-delay | 规定动画何时开始。默认是 0 |
| animation-iteration-count | 规定动画被播放的次数(number类型)。默认是 1,(infinite: 无限次) |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" ,'alternate' |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running",'paused' |
| animation-fill-mode | 规定对象动画时间之外的状态.forwards,backwards默认值 |

1、通过 @keyframes(关键帧动画) 规则,您能够创建动画。

2、创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,能够多次改变这套 CSS 样式。

3、以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。 0% 是动画的开始时间,100% 动画的结束时间。

4、为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

5、在CSS样式中,用animation属性来应用 @keyframes所定义的动画

案例

案例一:元素平移加颜色渐变
css 复制代码
<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    animation: dong 2s linear;
  }
  @keyframes dong{
    0%{
      background-color: aquamarine;
      margin-left: 0;
    }
    100%{
      background-color: blueviolet;
      margin-left: 300px;
    }
  }
</style>
<div class='box'>hello world</div>
案例二:将元素移动到某个位置,并且停在当前位置
css 复制代码
<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    animation: dong 2s linear;
    /* 动画执行完毕,停止在最后一个动画的效果 */
    animation-fill-mode: forwards;
  }
  @keyframes dong{
    0%{
      background-color: aquamarine;
      margin-left: 0;
    }
    100%{
      background-color: blueviolet;
      margin-left: 300px;
    }
  }
</style>
<div class='box'>hello world</div>
案例三:元素沿着正方形轨迹移动
css 复制代码
<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    animation: dong 2s linear;
    /* 动画执行完毕,停止在最后一个动画的效果 */
    animation-fill-mode: forwards;
  }
  @keyframes dong{
    /* 可以省略0%和100%的效果 */
    0%{
      transform: translate(0,0);
    }
    25%{
      transform: translate(300px,0);
    }
    50%{
      transform: translate(300px,300px);
    }
    75%{
      transform: translate(0,300px);
    }
  }
</style>
<div class='box'>hello world</div>
案例四:西游记效果
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        {
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .content{
            width: 100%;
            height: 100%;
            background: url('./imgs/10.jpg');
            animation: dong 20s linear infinite;
            position: relative;
        }
        /*背景移动效果 */
        @keyframes dong{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: 2000px 0;
            }
        }
        .wk{
            width:200px;
            height: 200px;
            position: absolute;
            top: 45%;
            left: 20%;
            background: url('./imgs/1.png') no-repeat 0 0;
            animation: wk 2s steps(8,end) infinite;
        }
        /*悟空移动效果 */
        @keyframes wk{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
        .bj{
            width:200px;
            height: 200px;
            position: absolute;
            top: 45%;
            left: 35%;
            background: url('./imgs/2.png') no-repeat 0 0;
            animation: bj 2s steps(8,end) infinite;
        }
        /*八戒移动效果 */
        @keyframes bj{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="wk"></div>
        <div class="bj"></div>
    </div>
</body>
</html>

steps 有两个参数 第一个表示分几步执行完 第二个有两个值 start 第一帧是第一步动画结束 end 第一帧是第一步动画开始

案例五:风车效果
css 复制代码
<style>
  div{
    width: 1000px;
    height: 500px;
    background-image: url(caodi.png);
    background-size: 1000px 500px
      margin: 100px auto;
    position: relative;
  }
  img:nth-child(1){
    width: 350px;
    height: 350px;
    position: absolute;
    left: 115px;
    top: 60px;
  }
  /*设置第二个风车*/
  img:nth-child(2){
    width: 150px;
    height: 150px;
    position: absolute;
    top: 285px;
    left: 440px;
  }
  /*设置第三个风车*/
  img:nth-child(3){
    width: 250px;
    height: 250px;
    position: absolute;
    top: 190px;
    left: 578px;
  }
  /*key:关键,键;frame:框架;关键帧动画*/
  @keyframes dongHua {
    0%{
      transform: rotate(0deg);
    }100%{
      transform: rotate(360deg);
    }
  }
  img{
    /*动画 合写*/
    animation: dongHua 1s infinite linear;

  }
</style>
<div>
  <img src="fengche.png" alt="这是一张图片:风车">
  <img src="fengche.png" alt="这是第二个风车">
  <img src="fengche.png" alt="这是第三个风车">
</div>
相关推荐
CodeSheep3 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛8 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i17 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟21 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览25 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少27 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z38 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z41 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构1 小时前
如何在 Shopify 中建立重定向
前端·html
汪子熙1 小时前
深入探析 header facets:定位与应用
前端·javascript