css动画

*{
-moa-box-sizing:border-box;/* 兼容 */
box-sizing: border-box;/* 不用减去边框内边距的距离 */
}
.a{
position: relative;
width: 100px;
height: 100px;
background-color: #00FFFF;
border-radius:20px;/* 方形圆角 ,可以设置四个角,写四个值用空格连接*/
box-shadow:red 10px 10px 10px;/*阴影颜色 阴影三个值:水平阴影,垂直阴影 ,模糊的距离*/
text-shadow: #0000FF 5px 5px 5px;/* 文字阴影 */
word-wrap: break-word;/* 单词自动换行,默认不换行,用于英文 */
background-image:url(../img/images/images/logo1.jpg) ;
background-size: 90px 90px;/* 放大缩小, */cover整个图片都在边框内
background-repeat:no-repeat ;
background-origin: padding-box;/* padding-box默认从内边距开始,border-box从边框开始写文字 */
column-count:2 ;/* 自动把文章改成相应的列数 2列*/
column-gap:30px ;/* 列与列之间的间隔 30个像素*/
}
.c{
position: absolute;
width: 10px;
height: 10px;
background-color: #000000;
top: 100px;
display: none;
z-index: 2; /* 向上两层，不加会在底部不显示*/
}
.a:hover .c{
display: block;//鼠标移动到a时c转化为块元素单独一行
}

.d{
overflow: hidden;//清除浮动
transform: translate(10px,10px);/* 从原来的位置移动,上,左 */
transform: rotate(100deg);/* 顺时针旋转 */
transform: scale(1.1);/* 放大为原来的1.1倍 */
transform: skew(30deg,20deg);/*翻转x轴和y轴 */
transition:all 2s ;/* all表示所有属性都执行，宽和高两秒过度,鼠标移入时改变形状 */
}
.d:hover{
width: 200px;
height: 200px;
background-color: #0000FF;
}

//鼠标移入e时e中的图片放大为原来的2倍
.e{
overflow: hidden;
border: #000000 1px;
width: 200px;
height: 200px;
background-color: #0000FF;
}
.e img{
transition:all 2s;
}
.e:hover img{
transform: scale(2);
}

动画
.f{
width: 100px;
height: 100px;
background-color: #0000FF;
animation: 动画名 12s infinite;
}/* infinite循环播放 */
@keyframes 动画名
{
from{}

to{}
}

@keyframes 规定动画。 
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 
animation-name 规定 @keyframes 动画的名称。 
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 
animation-delay 规定动画何时开始。默认是 0。 
animation-iteration-count 规定动画被播放的次数。默认是 1。 
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 
animation-fill-mode 规定对象动画时间之外的状态

}

/* transform: scale(2,2);
transition: transform 4s; */
/* transform: rotateX(130deg); *//* 沿x轴翻转130度 */
transition: transform 3s;