关于一些CSS动态效果的整理

仅列出一些常用命令，和常用简写：
过渡半秒：transition:.5s
放大缩小：transform:scale(1)
移动效果：translateX(100%)、translateY(100%)、translate(x,y)
旋转效果：rotate(45deg)

关联到动画：

test{animation:donghua infinite}
@keyframes donghua{0%{opacity:0}100%{opacity:1}}

套用多个动画

test{animation:donghua1 infinite,donghua2 infinite}
@keyframes donghua1{0%{opacity:0}100%{opacity:1}}
@keyframes donghua2{0%{transform:scale(1)}100%{transform:scale(1.1)}}

动画简写

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

每个属性的作用：

animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。

一个滚动轴效果：

.test{background-image:linear-gradient(45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%,transparent);background-color:#ddd;background-size:20px 20px;animation:gundong 2s linear infinite}
@keyframes gundong{0%{background-position:40px 0}100%{background-position:0 0}}

这里的background-image只起到颜色叠加的作用，并非是背景色。需要注意的是background-image中的四个百分比控制背景从上到下四个部分区域，每个区域需要两个端点去控制，如果每个端点只设置一次颜色，显示的效果就会是渐变色，如果你不需要渐变色，则必须在每个端点处设置两次颜色才能达到效果（这个和ps中的渐变色设置方法很像），而且要注意设置颜色的顺序，可以这么去理解：0_25%、25%50%、50%_{75%…这里的75}100%的部分因为和背景色同色，所以被省略掉了。45deg表示旋转45度角。background-color设置背景颜色，transparent表示不设置此处的颜色，也就是透明。background-size控制背景大小。animation用来关联后边的动画效果。