CSSanimation,cssanimation莲花开合

http://www.itjxue.com  2023-01-04 22:03  来源:未知  点击次数: 

CSS3的animation

animation: 属性是一个简写属性,用于设置六个动画属性:

animation: name duration timing-function delay iteration-count direction;

对应上面的属性意思: 动画名称 动画执行时间 动画速度曲线 延迟时间 执行次数 执行方向

nternet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

animation-name: keyframename|none;动画名称

keyframename 自定义的名字

none 无动画效果

animation-duration: time;动画执行时间

time 秒或毫秒

animation-delay:time;动画效果延迟时间

time 秒或毫秒

animation-timing-function: value; 动画速度曲线

linear:规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in:规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out :规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation-iteration-count: n|infinite;动画执行次数

n 具体的次数

infinite 无限重复

animation-direction: normal|alternate;动画执行方向

normal 正常顺序(默认值)

alternate 动画轮流反向播放

animation-play-state: paused|running;动画执行状态

paused 暂停动画

running 运行动画

animation-fill-mode : none | forwards | backwards | both;动画执行过程效果是否可见

none 不改变(默认值)

forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

八.CSS之animation(动画)

过渡(transition)

多个属性间使用,隔开

如果所有属性都需要过渡,则使用all关键字

大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡(auto不是有效数值,过渡动画效果不会生效)

时间单位:s 和 ms 1s = 1000ms

指定过渡的执行的方式

可选值:

transition-delay: 2s;

可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟

动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。

关键帧语法:

animation-name: 要对当前元素生效的关键帧的名字

animation-name: test;

animation-duration: 4s;

animation-delay: 2s;

可选值:

可选值:

可选值:

可选值:

animation: test 2s 2 1s alternate; 和transition 的简写类似 ,执行时间和延时时间顺序注意

变形就是指通过CSS来改变元素的形状或位置.

变形不会影响到页面的布局

transform 用来设置元素的变形效果

transform: translateY(-100px);

平移:平移元素,百分比是相对于自身计算的(px,100%)

z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近

z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果

, 必须要设置网页的视距

/* 设置当前网页的视距为800px,人眼距离网页的距离 */

perspective: 800px;

通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显

rotateX()

rotateY()

rotateZ()

单位 角度 deg、 n turn(圈)

**是否显示元素的背面 **

backface-visibility: hidden;

CSS animation 与 CSS transition 有何区别

一、指代不同

1、animation :属性是一个简写属性,用于设置六个动画属性。

2、transition:属性是一个简写属性,用于设置四个过渡属性。

二、特点不同

1、animation :animation: name duration timing-function delay iteration-count direction;规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间,以秒或毫秒计。

2、transition:transition: property duration timing-function delay;规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。

三、要求不同

1、animation :请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

2、transition:始终设置?transition-duration?属性,否则时长为 0,就不会产生过渡效果。

参考资料来源:百度百科- CSS3

参考资料来源:百度百科-CSS语法

(责任编辑:IT教学网)

更多

相关时间特效文章

推荐时间特效文章