html+css基础：27、动画(基本使用/其他属性/动画复合属性/动画与过渡区别/动画案例)

Ⅰ、基本使用：animation-name: wangyoudong2;/animation-duration: 3s;/animation-delay: 0.2s;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>01_基本使用</title><style>.outer{width:1000px;height:100px;border:1px solid black;}/* 定义一个动画（定义一组关键帧）—— 第一种方式 */@keyframeswangyoudong{/* 第一帧 */from{}/* 最后一帧 */to{transform:translate(900px);background-color:red;}}/* 定义一个动画（定义一组关键帧）—— 第二种方式 */@keyframeswangyoudong2{/* 第一帧 */0%{}/* 29% { background-color: red; } *//* 48% { background-color: orange; } *//* 88% { background-color: yellow; } *//* 最后一帧 */100%{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 应用动画到元素 *//* 此时的 animation-name 属性表示要应用的动画名称 */animation-name:wangyoudong2;/* 动画持续的时间 *//* 此时的 animation-duration 属性表示动画的持续时间 */animation-duration:3s;/* 动画延迟时间 *//* 此时的 animation-delay 属性表示动画的延迟时间 */animation-delay:0.2s;}</style></head><body><divclass="outer"><divclass="inner"></div></div></body></html>

其二、结果为：

//一进入页面后的页面：

//动画执行过程：

// 最终结果：

Ⅱ、其他属性：animation-timing-function: linear;/animation-iteration-count: infinite;/animation-direction: alternate;/animation-fill-mode: forwards;/animation-play-state: paused;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>02_其他属性</title><style>.outer{width:1000px;height:100px;border:1px solid black;}@keyframesathome{from{}to{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 应用动画到元素 */animation-name:athome;/* 动画持续的时间 */animation-duration:3s;/* 动画延迟时间 */animation-delay:0.2s;/* ********其他属性--start*********** *//* 设置动画的方式 *//* 此时的 animation-timing-function 属性表示动画的方式 */animation-timing-function:linear;/* 动画播放的次数 *//* 此时的 animation-iteration-count 属性表示动画播放的次数 */animation-iteration-count:infinite;/* 动画的方向 *//* 此时的 animation-direction 属性表示动画的方向 */animation-direction:alternate;/* 动画以外的状态（不发生动画的时候在哪里） *//* 此时的 animation-fill-mode 属性表示动画以外的状态 *//* animation-fill-mode: forwards; */}.outer:hover .inner{/* 动画的播放状态 *//* 此时的 animation-play-state 属性表示动画的播放状态 */animation-play-state:paused;}</style></head><body><divclass="outer"><divclass="inner"></div></div></body></html>

其二、结果为：

//一进入页面后的页面：

// 该动画支持反复移动：

//hover之后动画暂停：

Ⅲ、动画的复合属性：animation: forwards 3s 0.5s alternate-reverse linear 2 athome;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>03_动画的复合属性</title><style>.outer{width:1000px;height:100px;border:1px solid black;}@keyframesathome{from{}to{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 动画的复合属性： 第一个属性值表示 animation-fill-mode ， 第二个属性值表示 animation-duration ， 第三个属性值表示 animation-delay ， 第四个属性值表示 animation-direction ， 第五个属性值表示 animation-timing-function ， 第六个属性值表示 animation-iteration-count ， 第七个属性值表示 animation-name */animation:forwards 3s 0.5s alternate-reverse linear 2 athome;}.outer:hover .inner{/* 动画的播放状态 *//* 此时的 animation-play-state 属性表示动画的播放状态 */animation-play-state:paused;}</style></head><body><divclass="outer"><divclass="inner"></div></div></body></html>

其二、结果为：

//一进入页面后的页面：

// 该动画支持反复移动(2s内)：

//hover之后动画暂停：

// 最终结果：

Ⅳ、动画与过渡的区别：transition: 3s linear;/animation: athome 3s linear forwards;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>04_动画与过渡的区别</title><style>.outer{width:1000px;height:200px;border:1px solid black;}.inner{width:100px;height:100px;}/* 用过渡，实现inner1跑到右边去 */.inner1{background-color:orange;/* 过渡效果：第一个属性值表示过渡的持续时间，第二个属性值表示过渡的方式 */transition:3s linear;}.outer:hover .inner1{transform:translate(900px);}/* 用动画，实现inner2跑到右边去 */@keyframesathome{0%{}50%{background-color:red;border-radius:50%;box-shadow:0px 0px 20px black;}100%{transform:translate(900px);}}.inner2{background-color:green;/* 动画效果：第一个属性值表示动画名称，第二个属性值表示持续时间，第三个属性值表示 timing-function，第四个属性值表示 fill-mode */animation:athome 3s linear forwards;}</style></head><body><divclass="outer"><divclass="inner inner1">过渡</div><divclass="inner inner2">动画</div></div></body></html>

其二、结果为：

//一进入页面后的页面：

//hover之后过渡效果才开始，而动画效果已结束：

// 最终结果：

Ⅴ、动画案例：animation: bike 1s steps(31) infinite;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>05_动画案例</title><style>div{width:130px;height:130px;background-image:url('../images/bike.png');margin:0 auto;margin-top:100px;/* 使用动画： 第一个属性值表示动画名称，第二个属性值表示持续时间，第三个属性值表示 steps(31)，第四个属性值表示 iteration-count 其中 steps(31) 表示动画的帧数，31表示有31帧，steps()表示每一帧的间隔时间是一样的 */animation:bike 1ssteps(31)infinite;}@keyframesbike{from{}to{background-position:0px -4030px;}}</style></head><body><div></div></body></html>

其二、结果为：

//一进入页面后的页面：骑车的动态效果

Ⅵ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
**其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：[https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482](https://blog.csdn.net/weixin_43405300/category_12654744.htm