css动画

   最近在做公司官网的首页改版，被UI虐的。。。。。唉。。。。说多了都是泪啊。。。。做完象征性的总结一下，但好像又不知道总结点啥，一点点的来吧。

在写官网首页之前，对css动画真的是一窍不通，连属性都不认识。前端小leader说，css动画无非就3个，animation，transition和transform。然后就开始照葫芦画瓢了，画的有些吃力！

言归正传：

一、自己不清楚的点

1.animation

animation-delay:规定在动画开始之前的延迟。

注：这里的延迟是动画第一次开始前的延迟。非每播放完成一次动画就延迟

2.width,height属性是走的cpu算的，transform是gpu。所以放大缩小这种动画用tranform吧！

 

记性不好，记一下笔记，以后查方便~

二、基础用法

1.transition: 视觉过渡效果。

transition-property:设置过渡效果的css属性的名称，取值：none | all |property;

transition-duration:完成过渡效果需要多少秒或毫秒，0为没有过渡效果

transition-timing-function:速度曲线，linear匀速，ease慢快慢，ease-in慢速开始，ease-in-out慢速开始和结束。

transition-delay: 过渡效果要等多长时间开始。

总写

transition: property1 duration1 timing-func1 delay1, property2 duration2 timeing-func2 delay2;

eg

.rectangle {
  width: 100px;
  height: 100px;
  background: #1ab394;
  border-radius: 4px;
  transition: width 2s ease 0s; //transition写在原dom上，写在hover效果上会出现，hover厉害时生硬的返回原来状态
}
.rectangle:hover {
  width: 200px;
}

　　

2.transform

包括：rotate（旋转）、skew（扭曲）、scale（缩放）、translate（移动）、matrix（矩阵变形）。

transform-origin:改变元素基点。默认为元素的中心点。

transform-origin: x y

transform-origin: left top

transform-origin:right;

transform-origin:25% 75%

 3.animation

https://www.cnblogs.com/jiasm/p/4699806.html 这篇文章写得非常详细

animation:name duration timing-function delay iteration-count direction play-state fill-mode;

 

@keyframes name {
  0% { top: 0; }/*0%可用from关键字替代*/
  50% { top: 10px; }
  100% { top: 0; }/*100%可用to关键字替代*/
}

注：

1.关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,

2.如属性后跟有 !important,则会忽略该属性,

3.某个关键帧如果重复定义,则取后定义的帧,　

4.各种前缀...@keyframe里边如果用到了transform,也是需要加前缀的

@-webkit-keyframes identifier {
 from { top: 0; }
  50% {
    top: 10px; /*该属性会动画*/
    background-color:red !important; /*因为有!important字样,所以该条将被忽略*/
    text-align:center; /*由于该属性不为可动画属性,因此也被忽略*/
}
  to { top: 20px;color:red; } 
  100% {color:green; } /*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/
}

@-webkit-keyframe demo {
    from {-webkit-transform:rotate(7deg);}  
    to {-webkit-transform:rotate(14deg);}  
}