【HTML5移动开发学习笔记】06-CH10-CSS3变换，渐变和动画

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89577361

CSS渐变-transition

简写属性由：

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property:可以渐变的属性有

background-color
background-position
background-size
border
border-color
border-width
border-spacing
box-shadow
bottom
clip
color
flex
font
margin
opacity
padding
perspective
right
text-indent
text-shadow
top
transform
vertical-align
word-spacing
ETC

transition-time-function:可以取ease，linear,ease,ease-out,ease-in-out,step-start,step-end,steps(x,start),steps(x,end),cubic-bezier(x,y,x1,y1)
ease=快入
linear=匀速
ease-in=加速
ease-in-out=加速，减速

可以多个属性同时渐变，property以逗号分隔各个属性值。可以多个属性分开渐变。

transition: border, color 500ms linear 250ms,
background-color 500ms linear 750ms

CSS3变换-transform

大小，旋转，平移，扭曲，重定位。
transform-origin=设置变化发生的原点，默认值50% 50% 0 ，即x, y,偏移量。
transform：函数有：

translate()平移，translateX()，translateY ()
scale(w,h)缩放,scaleX(),scaleY()
rotate(angle)旋转，rotateX(),rotateY()
skew(x,y)扭曲，skewX(),skewY()
matrix()

可以多种变换.
3D变换函数：translate3d(x,y,z)，把元素右移x,下移y，向用户移动z
perspective§：获得单个元素的视图效果

CSS3动画-animation

简写属性有:

animation-name:name
animation-duration:0
animation-timing-function:ease
animation-delay
animation-iteration-count:整数，infinite
animation-direction:交替循环alternate，逆序播放normal
animation-fill-mode:none,forwards,backwords,both

animation-play-state:播放状态pause，running

关键帧：

@keyframes{
from{
}
to{
}
//或者
0%{}
10%{}
100%{}
}

具体动画效果见其他文章：关键词=CSS3动画效果实战