Tag : dong-hua
Tag : dong-hua
由于目前市场的环境,还在努力向下兼容低版本浏览器,所以css3应用还不是很广泛,主要应用在移动端web上,但是覆盖面依旧很低,但随着市场发展,应用场景会越来越广泛,web视觉上的效果要求也会越来越高!
css3动画分为2D和3D,以下对2D效果做个总结
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform: none|transform-functions;
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
注:可连续定义过渡用”,”分隔
transition: property duration timing-function delay;
transition-property: none|all|property;
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
注:一定得定义,不然默认为0,将不会有过渡效果
transition-duration: time;
time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
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 之间的数值。
注:0为立即实行,因为没有设定等待时间.-time设定为负数时,将立即实行,从动画倒退time为开始的效果
transition-delay: time;
time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。合法的值:0-100% from(与 0% 相同)to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-name: keyframename|none;
keyframename 规定需要绑定到选择器的 keyframe 的名称。
none 规定无动画效果(可用于覆盖来自级联的动画)。
注:一定得定义,不然默认为0,将不会有动画效果
animation-duration: time;
time 规定完成动画所花费的时间。
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
注:0为立即实行,因为没有设定等待时间.-time设定为负数时,将立即实行,从动画倒退time为开始的效果
animation-delay: time;
time 可选。定义动画开始前等待的时间,以秒或毫秒计。
animation-iteration-count: n|infinite;
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。
animation-direction: normal|alternate;
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
注:可通过js控制该属性启动/暂停动画
animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
可以把transform理解为元素的样式属性,和width,height一样,只是相应的效果选择更多.
transition过渡动画,当设定的property发生改变时,会通过设定的timing-function的过渡方式进行过渡改变,一般灵活运用该功能已经能完成大多数需求了!
animation可以算作css3里面的高阶应用了,当然只要把整个动画效果,抽丝剥茧后,设定好相应的属性就行,再通过js调用play-state,就可对动画进行暂停/启动操作
css3的出现并不是说实现效果不在需要用到js了,而是通过和js的结合使用达到更好的效果!
Categories: Html5/CSS3, 前端开发