animation-name

最新推荐文章于 2022-10-16 15:09:48 发布
转载 最新推荐文章于 2022-10-16 15:09:48 发布 · 110 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/papajia/p/4498197.html

本文详细介绍了使用CSS3实现的一个有趣的动画案例——一只会动的眼睛。通过对关键帧动画的设置，实现了眼睛左右移动的效果，展示了如何利用CSS3的animation属性进行创意设计。

//HTML

1
2
3
4
< div  id = "beastainer" >
< img  alt = ""  src = "https://developer.cdn.mozilla.net/media/img/beast-404_LE.png"  id = "beast404le" >
< img  alt = ""  src = "https://developer.cdn.mozilla.net/media/img/beast-404_RE.png"  id = "beast404re" >
< img  alt = ""  src = "https://developer.cdn.mozilla.net/media/img/beast-404.png"  class = "beast 404" >

//CSS3 animation-name

#beastainer {

float: right;

padding: 20px 0 20px 20px;

position: relative;

}

#beast404re,#beast404le {

position: absolute;

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

-webkit-animation-duration: 7s;

-moz-animation-duration: 7s;

-ms-animation-duration: 7s;

animation-duration: 7s;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-ms-animation-play-state: running;

animation-play-state: running

}

#beast404re {

left: 231px;

top: 68px;

-webkit-animation-name: crazyrighteye;

-moz-animation-name: crazyrighteye;

-ms-animation-name: crazyrighteye;

animation-name: crazyrighteye

}

#beast404le {

left: 125px;

top: 65px;

-webkit-animation-name: crazylefteye;

-moz-animation-name: crazylefteye;

-ms-animation-name: crazylefteye;

animation-name: crazylefteye

}

@-moz-keyframes crazylefteye {

0% { left: 125px; top: 65px}

10% { left: 118px; top: 56px}

20% { left: 118px; top: 56px}

40% { left: 148px; top: 62px}

50% {left: 145px;top: 72px}

60% {left: 121px;top: 70px}

70% {left: 125px;top: 65px}

100% {left: 125px;top: 65px}

}

@-webkit-keyframes crazylefteye {

0% {left: 125px;top: 65px}

10% {left: 118px;top: 56px}

20% {left: 118px;top: 56px}

40% {left: 148px;top: 62px}

50% {left: 145px;top: 72px}

60% {left: 121px;top: 70px}

70% {left: 125px;top: 65px}

100% {left: 125px;top: 65px}

}

@-o-keyframes crazylefteye {

0% {left: 125px;top: 65px}

10% {left: 118px;top: 56px}

20% {left: 118px;top: 56px}

40% {left: 148px;top: 62px}

50% {left: 145px;top: 72px}

60% {left: 121px;top: 70px}

70% {left: 125px;top: 65px}

100% {left: 125px;top: 65px}

}

@-ms-keyframes crazylefteye {

0% {left: 125px;top: 65px}

10% {left: 118px;top: 56px}

20% {left: 118px;top: 56px}

40% {left: 148px;top: 62px}

50% {left: 145px;top: 72px}

60% {left: 121px;top: 70px}

70% {left: 125px;top: 65px}

100% {left: 125px;top: 65px}

}

@keyframes crazylefteye {

0% {left: 125px;top: 65px}

10% {left: 118px;top: 56px}

20% {left: 118px;top: 56px}

40% {left: 148px;top: 62px}

50% {left: 145px;top: 72px}

60% {left: 121px;top: 70px}

70% {left: 125px;top: 65px}

100% {left: 125px;top: 65px}

}

@-moz-keyframes crazyrighteye {

0% {left: 231px;top: 68px}

10% {left: 212px;top: 62px}

20% {left: 212px;top: 62px}

40% {left: 239px;top: 64px}

50% {left: 240px;top: 80px}

60% {left: 215px;top: 73px}

70% {left: 231px;top: 68px}

100% {left: 231px;top: 68px}

}

@-webkit-keyframes crazyrighteye {

0% {left: 231px;top: 68px}

10% {left: 212px;top: 62px}

20% {left: 212px;top: 62px}

40% {left: 239px;top: 64px}

50% {left: 240px;top: 80px}

60% {left: 215px;top: 73px}

70% {left: 231px;top: 68px}

100% {left: 231px;top: 68px}

}

@-o-keyframes crazyrighteye {

0% {left: 231px;top: 68px}

10% {left: 212px;top: 62px}

20% {left: 212px;top: 62px}

40% {left: 239px;top: 64px}

50% {left: 240px;top: 80px}

60% {left: 215px;top: 73px}

70% {left: 231px;top: 68px}

100% {left: 231px;top: 68px}

}

@-ms-keyframes crazyrighteye {

0% {left: 231px;top: 68px}

10% {left: 212px;top: 62px}

20% {left: 212px;top: 62px}

40% {left: 239px;top: 64px}

50% {left: 240px;top: 80px}

60% {left: 215px;top: 73px}

70% {left: 231px;top: 68px}

100% {left: 231px;top: 68px}

}

@keyframes crazyrighteye {

0% {left: 231px;top: 68px}

10% {left: 212px;top: 62px}

20% {left: 212px;top: 62px}

40% {left: 239px;top: 64px}

50% {left: 240px;top: 80px}

60% {left: 215px;top: 73px}

70% {left: 231px;top: 68px}

100% {left: 231px;top: 68px}

}

 

转载于:https://www.cnblogs.com/papajia/p/4498197.html

CSS3 animation-name 属性
shengyin714959的博客
09-06 176
animation-name 属性为 @keyframes 动画指定名称。默认值:none继承:no版本:CSS3object。
animation-name属性
热门推荐
m0_60544381的博客
12-16 1万+
开发工具与关键技术：VSCode HTML CSS 作者：尘则 撰写时间：2021/12/18 今天来说说animation-name属性，先看效果： animation-name属性:主要是用来调用 @keyframes 定义好的动画。 需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写）， 如果不一致将不具有任何动画效果。 属性值： none:默认值。当值为 none 时，将没有任何动画效果,这可...
css name样式,CSS属性参考 | animation-name
weixin_39872123的博客
08-04 858
animation-name属性指定应用的一系列动画名称，每个名称代表一个由@keyframes定义的动画序列。我们通常使用animation的简写属性可以很方便地同时设置所有的动画属性。你可以为animation-name属性提供多个值，各个值之间使用逗号来分隔。每一个动画名称都应该对应一个@keyframes帧动画。如果动画名称指定的动画没有相对应的帧动画，那么该动画名称无效。如果你为anim...
css样式中name用什么,CSS3中的animation-name属性怎么用
weixin_42214418的博客
08-03 826
CSS3中的animation-name属性的用法：【animation-name: keyframename|none】。该属性用来给@keyframes动画规定名称。css3 animation-name属性作用：animation-name 属性为 @keyframes 动画规定名称。语法：animation-name: keyframename|none;keyframename：规定需要...
HTML+CSS实现淡入淡出动画 ：animation-name
debugtoday的博客
02-25 1万+
HTML+CSS实现淡入淡出动画 ：animation-name
定义动画名字html,CSS3 animation-name属性怎么用？
weixin_31640385的博客
06-07 705
css3 animation-name属性是用来检索或设置对象所应用的动画名称，必须与@keyframes配合使用，因为动画名称由@keyframes定义 ；如果有多个属性值，可以用逗号进行分隔。css3 animation-name属性作用：animation-name 属性为 @keyframes 动画规定名称。语法：animation-name: keyframename|none;keyf...
微信小程序动画课程-通过wxss(css)来实现-animation-name属性
杭州.黄老师
01-19 1658
animation-name属性 通用语法 规定 @keyframes 动画的名称 定义和用法 animation-name 属性为 @keyframes 动画规定名称。 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。 默认值： none 继承性： no 版本： CSS3 JavaScript 语法： object.style.animationN...
animation-name使用简介（初级）
xiaotao131的专栏
10-01 2520
animation-name使用简介 1、animation-name是什么 2、animation-name使用 3、animation-name使用详解animation-name是什么animation-name英文意思就是【动画名称】，animation-name属性就是应用动画的名字，在使用已定义好的动画时能引用到对应的动画。animation-name使用使用例子：<!DOCTYP
HTML5基础加强css样式篇（animation属性animation-name,animation-delay,animation-duration，等)（三十）
余正源的博客
04-05 2086
1.
CSS动画-Animation
温情
10-16 5806
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
介绍CSS3动画常用属性的视频脚本，包含animation-duration、animation-name animation-delay animation-iteration-count animation-direction字数1000字左右
06-02
非常感谢您的提问，以下是关于CSS3动画常用属性的视频脚本，其中包括animation-duration、animation-name、animation-delay、animation-iteration-count和animation-direction的详细介绍。 CSS3动画是为了能够在...
animation-name B、animation-duration C、animation-timing-function D、animation-delay
06-08
这里列出了四个CSS属性：animation-name、animation-duration、animation-timing-function和animation-delay。它们是用来控制CSS动画的。 - animation-name用于指定一个动画效果的名称。 - animation-duration用于...
-webkit-animation-name
12-12
-webkit-animation-name是CSS3中的一个属性，主要用于WebKit内核的浏览器（如Chrome和Safari）中定义动画的名称。通过设置这个属性，可以指定一个@keyframes规则，该规则定义了动画的具体内容和效果。 具体来说，-...
2022年单片机-第讲.ppt
最新发布
09-10
2022年单片机-第讲.ppt
protobuf-lite-3.5.0-13.el8.tar.gz
09-10
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
2020年大学生网络公司实习报告范文.doc
09-10
2020年大学生网络公司实习报告范文.doc
计算机工作总结范文.doc
09-10
计算机工作总结范文.doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值