资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么调用动画animation-name属性-创新互联

本篇文章为大家展示了怎么调用动画animation-name属性,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网站空间、营销软件、网站建设、香洲网站维护、网站推广。

在实现动画效果之前,我们要先了解一下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属性,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联网站制作公司行业资讯频道。


名称栏目:怎么调用动画animation-name属性-创新互联
新闻来源:http://www.cdkjz.cn/article/ddegds.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220