1.CSS3 2d 转换

1.translate

语法：

transform:translate(x,y);

                 translateX(n);

                translateY(n);

重点：定义2D转换中的移动：沿着X和Y轴移动元素

translate 最大的优点：不会影想到其他的元素的位置

translate中的百分比单位是相对于自身元素的translate：(50%, 50%);

对行内标签没有效果 （例如：span)

2.roate

transform: rotate(30deg);       // 顺时针旋转30度

旋转中心点为元素的中心点

                                              时间过渡： 过渡写到本身上，谁做动画给谁加

transition ： 0.3s；

transform-origin(x y)        // x,y 为坐标

还可设置 方位名词  top  bottom left right center )

3.scale

缩放效果  scale（x,y）

x,y 为倍数

transform: scale(2,3)   // 宽和高增大两倍

一样可以设置中心点（默认元素中心）   transform-origin: left bottom;

优点：不会影响其他盒子

4.多个转换

transform: translate(300px, 300px) rotate(360deg) scale(0.3,0.3);

位移在前

2.CSS3 动画

先定义动画， 在使用（调用）动画

animation: move 3s linear 2s  infinite alternate;   / / linear 匀速

animation ：动画名称 持续时间  运动曲线  何时开始  播放次数  是否反方向 动画起始 或结束状态

前两个必须写，后面的可省略

nimation-play-state ： paused            / /  默认是 running     鼠标一放上去，立即停止

@keyframes 动画名称  {}

@keyframes move{

// 动画序列
                    0%{
                        transform: translate(0,0);
                    }
                    25%{
                        transform: translate(1000px,0);
                    }

                    50%{
                        transform: translate(1000px,1000px);
                    }
                    75%{
                        transform: translate(0,1000px);
                    }
                    100%{
                        transform: translate(0,0);
                    }
              }

css 中

animation: move 3s infinite;// infinite  无限循环

animation-direction:  alternate;              / /  反向运动
animation-iteration-count: infinite;        / / 无限循环

animation-fill-mode:backwards;          / /  动画结束后的状态  默认的是 backwards 回到起点

animation-fill-mode:forwards;              / / 停在结束状态

a

 

animation-timing-function   默认 ease

step（）是分几步完成动画

 white-space: nowrap;          /*让文字强制一行内显示*/