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

动画的基本使用/其他属性/动画复合属性/动画与过渡区别/动画案例等Ⅰ、基本使用animation-name: wangyoudong2;/animation-duration: 3s;/animation-delay: 0.2s;其一、代码为其二、结果为Ⅱ、其他属性animation-timing-function: linear;/animation-iteration-count: infinite;/animation-direction: alternate;/animation-fill-mode: forwards;/animation-play-state: paused;其一、代码为其二、结果为Ⅲ、动画的复合属性animation: forwards 3s 0.5s alternate-reverse linear 2 athome;其一、代码为其二、结果为Ⅳ、动画与过渡的区别transition: 3s linear;/animation: athome 3s linear forwards;其一、代码为其二、结果为Ⅴ、动画案例animation: bike 1s steps(31) infinite;其一、代码为其二、结果为Ⅵ、小结Ⅰ、基本使用animation-name: wangyoudong2;/animation-duration: 3s;/animation-delay: 0.2s;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title01_基本使用/titlestyle.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/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面//动画执行过程// 最终结果Ⅱ、其他属性animation-timing-function: linear;/animation-iteration-count: infinite;/animation-direction: alternate;/animation-fill-mode: forwards;/animation-play-state: paused;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title02_其他属性/titlestyle.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/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面// 该动画支持反复移动//hover之后动画暂停Ⅲ、动画的复合属性animation: forwards 3s 0.5s alternate-reverse linear 2 athome;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title03_动画的复合属性/titlestyle.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/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面// 该动画支持反复移动(2s内)//hover之后动画暂停// 最终结果Ⅳ、动画与过渡的区别transition: 3s linear;/animation: athome 3s linear forwards;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title04_动画与过渡的区别/titlestyle.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/headbodydivclassouterdivclassinner inner1过渡/divdivclassinner inner2动画/div/div/body/html其二、结果为//一进入页面后的页面//hover之后过渡效果才开始而动画效果已结束// 最终结果Ⅴ、动画案例animation: bike 1s steps(31) infinite;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title05_动画案例/titlestylediv{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/headbodydiv/div/body/html其二、结果为//一进入页面后的页面骑车的动态效果Ⅵ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、若有转发或引用本文章内容请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482**其四、再有兴趣的话也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)[https://blog.csdn.net/weixin_43405300/category_12654744.html?spm1001.2014.3001.5482](https://blog.csdn.net/weixin_43405300/category_12654744.htm