css3新特性学习摘要

1.背景（background）添加多个图片，用逗号分隔即可

　　div{background:url(xxx) no-repeat left top, url(yyy) no-repeat right top}

　　麻烦的是，如果用重复（repeat, repeat-x, repeat-y）的话，图片会相互覆盖，不会用此来实现背景叠加效果不错

2.过度效果（transition）

　　div{
　　　　transition-proerty: width,color,xxx等或者all;
　　　　transition-duration: 时长s;
　　　　transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
　　　　transition-delay:开始前的延时s;
　　}

　　在定义好后任意时刻，针对指定属性的变化，都为有过度的效果，如：

　　div:hover{width:100px}

3.动画(animation)

　　div{
　　　　animation-name:mymove;
　　　　animation-duration: 5s;
　　　　animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
　　　　animation-delay:2s;
　　　　animation-iteration-count:n|infinite;
　　　　animation-direction:normal|alternate;
　　　　animation-play-state:running|paused;
　　　　animation-fill-mode:none|forwards|backwards|both;
　　}

　　@keyframes mymove{
　　　　from {left:0px;}
　　　　50% {background:blue}
　　　　to {left:200px;}
　　}

　　实现动画停留在最后状态的方法：

　　a.把样式设置最终的效果，animation-iteration-count设为1
　　b.直接把animation-fill-mode设为forwards 

　　　　

转载于:https://www.cnblogs.com/freewing/p/4425424.html