本篇文章为大家展示了怎么调用动画animation-name属性,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联公司2013年开创至今,是专业互联网技术服务公司,拥有项目成都网站制作、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元新河做网站,已为上家服务,为新河各地企业和个人服务,联系电话:13518219792
在实现动画效果之前,我们要先了解一下animation-name属性:
animation-name属性语法:animation-name:动画名;
说明:在使用animation-name属性定义对话的时候,我们一定要使用keyframes命名的名称一致,前提要区分大小写,如果出现不一致的话,可能就不会有任何的效果,为了其他浏览器的兼容性,我们可以在前面加一个webkit前缀。
代码如下:
在以上代码中,我们使用了keyframes去定义了两个动画,但是只要我们使用animation-name调用mytransform,mytransform动画才会去生效,而mycolor就不会去生效,在mytransform动画中,在div中,我们把border-radius属性值实现从0变成50px,然后再由50%变成100%,并且保持属性不变,水平向右移动50px。
很多学员都会有这样的疑问,我们都是使用hover伪类去实现鼠标移动到该元素的时候,动画才会开始,那么当我们打开网页第一时间就想出现动画效果,该怎么执行呢?
其实也是很简单的,我们在div中找到鼠标指针停留在div中的样式,并且去掉,把样式改成div元素本身样式,就会出现页面打开就不会立即播放。
上述内容就是怎么调用动画animation-name属性,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。