HTML中对于 animation（动画）属性的使用方法

本人最近开始写爱奇艺项目时，项目要求我对一个下拉列表写一个动画弹出效果，由于不经常写前端，所以我又重新去学习了CSS3中的 animation属性，我相信肯定有很多人在后面学习前端的时候也会用到这个属性，所以今天把这个属性的方法在社区跟大家分享一下。

项目要求：

下拉菜单框以动画形式出现，尺寸由310px*22px逐渐过渡至360px*72px，过渡时间为0.3s。

分析：

这里的尺寸由310px*22px逐渐过渡至360px*72px，而且过渡时间为0.3s，所以这个时候我们需要用到CSS3中的animation动画属性。

属性用法：

animation：自定义动画函数名过渡时间；

@keyframes 自定义动画函数名{

}

HTML：

<div>把鼠标放在我上面出现动画效果下拉框<ul><li>这是具有动画效果的下拉框</li></ul>
</div>

CSS：

div{width: 200px;height: 50px;background-color: yellow;margin: auto;position: relative;
}
div:hover{cursor: pointer;
}
div>ul{position: absolute;top: 40px;right: 0px;width: 360px;height: 72px;border:5px red solid;display: none;border-radius: 3px;
}
/*下方代码为实现出现下拉框时具有动画效果代码*/
div:hover>ul{display: block;/*我这里自定义名字为aa*/animation: aa 0.3s;
}
@keyframes aa{from{width: 310px;height: 22px;}to{width: 360px;height: 72px;}
}

运行效果：

这里我只上传了未触发效果前和触发效果后的图片，动画效果大家可以自己去实验

未触发效果前：

触发效果时：

HTML中对于 animation（动画）属性的使用方法相关推荐

用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
java jar 没有主清单属性_Spring Boot jar中没有主清单属性的解决方法
使用Spring Boot微服务搭建框架,在eclipse和Idea下能正常运行,但是在打成jar包部署或者直接使用java -jar命令的时候,提示了xxxxxx.jar中没有主清单属性: D:\h ...
xxx-1.0-SNAPSHOT.jar中没有主清单属性的解决方法
我在spring boot的pom.xml文件中,加了 <packaging>jar</packaging> 代码,然后再打成jar,但当我通过java -jar xxx.ja ...
animation停留_css animation动画属性
首先,当接触到"动画"这个词汇的时候.想到的都有哪些内容? 1.这个动画经历了多长时间 2.这个动画怎么动的?从上往下?还是从左往右? 3.这个动画动几次?无限次吗? 4.动画如果 ...
在GridView的行绑定中应用Animation动画效果
今天做一个功能需要实现绑定GridView的行Button点击就实现Animation的动画效果,终于被我解决了!主要代码如下: GridVIew行绑定: <ItemTemplate> ...
css3的animation动画属性实现闹钟左右摇摆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
html+css中的animation 动画(二)孙悟空巡山
打开页面孙悟空在原地匀速运动,背景利用视觉差匀速的向后运动附代码 <!DOCTYPE html> <html lang="en"> <head> ...
Android动画详解之Android 动画属性和实现方法之帧动画（二）
一.简介 Frame Animation(AnimationDrawable对象):帧动画,就像GIF图片,通过一系列Drawable依次显示来模拟动画的效果. 必须以<animation-li ...