aiLabel:

CSS3动画简介

拿得起放得下
好评回答

最初接触页面元素动画是jquery的animate函数,这个函数结合其他jquery方法基本可以满足各种动画需求。但随着css的快速发展,不用javascript同样也可以做出绚丽的动画效果。css3中可以设置动画效果的属性有两个:Transition和Animation,下面就简单介绍一些这两个属性的使用。

操作方法
01

transition相对简单,只需要指定以下几个属性即可。transition-property:参与过渡的属性,比如 height、width等css样式,所有样式用关键字“all”,没有样式需要过渡使用“none”。transition-duration:过渡持续的时间,单位是秒(s),比如 width从100px过渡到200排序需要的时间。transition-timing-function:过渡的动画类型,有以下几种取值。linear:线性过渡,等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。ease:平滑过渡,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。ease-in:由慢到快,等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。ease-out:由快到慢,等同于贝塞尔曲线(0, 0, 0.58, 1.0)。ease-in-out:由慢到快再到慢,等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。cubic-bezier( ):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内。transition-delay: 动画延迟执行的时间。-------------------transition样式的写法---------------------transition同background属性一样有缩写和拆分两种方式,就是说你可以把每个属性都加到transition后,如?transition: border-color .5s ease-in .1s;也可以把这些属性拆分,分别设置在个属性之后,上边的缩写拆分后如下:transition-property: border-color;transition-duration: .5s;transition-timing-function: ease-in;transition-delay: .1s;如果需要对个样式设置过渡动画,可以用逗号分开,缩写如:transition: border-color .5s ease-in .1s,color .3s ease .2s;拆分写法如:transition-property: border-color, color;transition-duration: .5s, .3s;transition-timing-function: ease-in, ease;transition-delay: .1s, .2s;拆分写法中如果某个属性是多组共用的,则不需要分别设置,比如:transition-duration: .5s, .5s; ---> transition-duration: .5s;但是transition有几个很大的局限。(1)transition需要事件触发,所以没法在网页加载时自动发生。(2)transition是一次性的,不能重复发生,除非一再触发。(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。所以就诞生了animation属性,相对transition略显复杂,但是功能更强大。

02

animation与transition有几个相同的属性,duration、timing-function、delay。animation-name:animation需要指定动画的名字,这个是用来在@keyframes中指定执行动画的样式。animation-durarion:动画的执行时间,单位s(秒)。animation-timing-function:动画类型,取值与transition相同。animation-delay:动画延迟时间,单位s(秒)。animation-iteration-count:动画执行的次数,这个属性就客服了transition局限中的第二条,取值可以是数字指定具体循环几次,也可以设置关键字“infinite”无限循环。animation-direction:动画在循环执行时是否反方向,取值“normal”正常方向、“alternate”正常与反向交替。animation-play-state:设置执行中动画的状态,取值“running”、“paused”。animation-fill-mode:设置动画执行时间之外的状态,取值“none”(默认,不设置)、forwards(动画结束时的状态)、“backwards”(动画开始时的状态)、“both”(开始或结束时的状态)。动画中的每个属性都介绍完毕之后,其实你应该还是一头雾水,这怎么可能产生动画,关键在于@keyframes中。----------------------------@keyframes-----------------------------给一个例子:@keyframes rainbow {from { background: #c00 }50% { background: orange }to { background: yellowgreen }}用百分比的形式表示一个动画周期中的各个状态,其中0%、100%可以分别用from、to表示,每个百分点的状态可以当做一个css class,可以设置多个样式哦,rainbow 就是animation-name的值。-------------------------------END------------------------------------至此CSS3的两种动画设置方式就简略的介绍完了。

拿得起放得下 2023-03-20 12:07:25
本网站引用、摘录或转载上述内容仅供网站访问者交流或参考,文中观点或信息与爱问公司无关,与之相关的任何事务以及法律责任均与爱问公司无关。

最新回答 换一换

1

问:鱼头对着人有什么寓意

答:
答:上鱼的时候,主人或招待者有意将鱼头朝向桌上辈分最大、职务最高或者是酒量最大的人摆放,由他带头喝酒吃鱼。要是有人没等鱼头对着的人发话就抢先动筷子,便会被人耻笑为不懂规矩或者没有见过大场面。俗话说:无酒不成席,无鱼不成宴。宴请宾客时,通常要上条鱼作为一道主菜-意味着“连年有余”。每当酒宴时招待或女主人喊一声:“鱼来了!”大家精神就会为之大振。这时,将鱼盘放在酒席正中央,鱼头对着谁,谁就要先喝酒,鱼尾对着谁,也要陪着喝酒。然后喝鱼头酒的客人先动筷表示谢意-意为剪彩,此后其他人才能动筷吃鱼,为酒宴增添了很多情趣。这种酒俗我们称之为“鱼酒令”或称为“鱼头酒”。这个饮酒的方式后来流传到民间,逐步演变成风行的喝“鱼头酒”了。宴宾时以它助兴,花样也越来越多。上鱼的时候,主人或招待者有意将鱼头朝向桌上辈分最大、职务最高或者是酒量最大的人摆放,由他带头喝酒吃鱼。要是有人没等鱼头对着的人发话就抢先动筷子,便会被人耻笑为不懂规矩或者没有见过大场面。现时情况下,每当鱼上桌,通常要将鱼头朝向主宾,鱼尾对末席或称为(主)陪席,要喝头三尾四酒,即鱼头对着者喝三杯,鱼尾对着者喝四杯。此后,喝鱼头酒者(主宾)相继变着花样把鱼眼、鱼脸、背鳍等不同部位敬献众人,分别说“高看一眼”、“给个面子”、“一帆风顺”等祝词,请各喝一杯或几杯,目的就在于让大家多喝几杯酒,以尽其酒兴。

相关推荐

怎么移栽兰花

步骤1:修剪兰花根。有的很长,我们把它修剪下再种。一般留5cm就可以了。步骤2:在花盆中倒入三分之一的沙土,不要太多。在花盆底部铺一成就可以了步骤3:把要移栽的兰花放入盆中。...
详情>
提问时间:2019-12-12

动物的特点有哪些

动物的特点有:断尾、伪装、装死、释放臭气、排脏。1、断尾壁虎在正常生活时不会断尾,但如果遇到危险就会断尾,是一种自卫,一种应对危险的本能反映。当它受到外力牵引或者遇到敌害时,...
详情>
提问时间:2021-08-22

记忆塑料眼镜框好吗

记忆塑料眼镜框好,该眼镜框的材质安全,而且比较轻便,耐摔,不会生锈。记忆塑料是一种新型的热敏性功能材料。它是在室温以上―定温度下变形,并能在室温下固定形变且长期存放,当再升温...
详情>
提问时间:2019-10-12

立了秋把扇丢什么意思

立了秋把扇丢意思是立秋之后就不热了。立秋,是二十四节气中的第13个节气,更是秋天的第一个节气,标志着孟秋时节的正式开始:“秋”就是指暑去凉来。立秋时,北斗指向西南。从这一天起...
详情>
提问时间:2019-09-11

烧仙草奶茶保质期多久

如果温度高于20℃,未开封奶茶大概能保存2小时。但如果将烧仙草置于冰箱中保存,冰箱低温可以抑制细菌、微生物滋生,延长其保质期,一般能够保存24小时,但建议最好在2-4小时内饮...
详情>
提问时间:2021-08-05

纯牛奶过期了还能喝吗

纯牛奶过期了不能喝了,纯牛奶过期了不仅营养物质遭受破坏,还可能滋生了大量的有害细菌,饮用后可能会导致身体不适,因此不建议喝。如果牛奶的颜色为黄色,闻起来发酸、发臭,质地变稀或...
详情>
提问时间:2019-09-17

三波咖啡浪潮分别是什么

第一波咖啡浪潮是指咖啡消费的普及,第二波咖啡浪潮是指烘焙咖啡的推广和连锁咖啡品牌的兴起,第三波咖啡浪潮是指产地和精品咖啡的崛起。咖啡是用经过烘焙的咖啡豆所制作冲泡的饮料,与可...
详情>
提问时间:2020-05-10

百香果怎么种植 在家

1、首先从百香果果肉里面取出种子,用清水浸泡一天。2、然后把种子埋在花盆育苗,土壤要疏松,等到长苗后再分盆种植。3、每个盆里最多只留一株幼苗。4、等长到五个月左右要给它们搭一...
详情>
提问时间:2020-07-22

微信公众号怎么开通赞赏用户

微信公众号开通赞赏用户必须开通原创保护,而且这个功能是平台邀请的,只有不断的坚持原创达到一定的时候就会邀请你开通这个功能了。有邀请权限的公众号在“赞赏功能”里填写微信号发送创...
详情>
提问时间:2019-10-24

出梅的标准是什么

出梅的标准是,梅雨结束前后,120-130°E间副热带高压脊线北跳至26°N或以北,且日平均气温≥27℃,最高气温≥30℃,且连续6天以上无雨。以后再出现连阴雨,属“夏雨”,...
详情>
提问时间:2020-07-15

翡翠有时会发热吗

第一,“感觉镯子变的比从前水、润,”这个是可能的,因为是玉养人,人养玉,如果越戴越水,润则说明你体质好,运气好。有些戴了感觉越戴越浊,就可能是运不太好。第二,你感觉温热,但手...
详情>
提问时间:2019-10-03

按摩足三里有什么好处

足三里是男性养生的第一大针刺或按摩足三里穴能治疗消化系统的常见病,如胃十二指肠球部溃疡、急性胃炎、胃下垂等,解除急性胃痛的效果尤其明显。穴,能够调理脾胃、补中益气、补肾壮阳,...
详情>
提问时间:2019-08-26

物联网工程的内容有哪些

物联网工程一般指高校开设物联网相关专业之一(物联网工程、传感网技术、智能电网)。主干学科与课程:信息与通信工程、电子科学技术、计算机科学与技术、物联网概论、电路分析基础、信号...
详情>
提问时间:2020-08-05

喝茶可以吃香蕉吗

这两种食物没有禁忌,所以喝完茶吃香蕉应该不会怎么样!吃过香蕉后不能马上喝茶是没有科学依据的,有一种茶就叫做:香蕉茶,就是将香蕉剥皮研碎加入茶叶,再加适量蜜糖饮用,对治疗高血压...
详情>
提问时间:2019-04-24