CSS animation动画、伪类和伪元素

animation： css的一个常用属性，是一种简写属性，用于设置6个动画属性；

• animation-name //需要绑定到选择器的 keyframe 名称
• animation-duration //动画执行需要花费的时间，一般秒或者毫秒计，比如：2s
• animation-timing-function //动画的速度曲线，如下:
  1. linear 动画从头到尾的速度是相同的。
  2. ease 默认。动画以低速开始，然后加快，在结束前变慢。
  3. ease-in 动画以低速开始。
  4. ease-out 动画以低速结束。
  5. ease-in-out 动画以低速开始和结束。
• animation-delay //动画开始之前的延迟，比如：2s
• animation-iteration-count //执行播放的次数 比如：1-n次，infinite 无限次数
• animation-direction //是否要轮流反向播放动画，默认值：normal 正常播放，alternate 动画应该轮流反向播放

js中使用
animation-play-state属性：
object.style.animationPlayState="paused" paused：动画已暂停 running：正在播放
animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见
object.style.animationFillMode=none

• none：不改变默认行为
• forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
• backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
• both：向前和向后填充模式都被应用。

@keyframes属性 创建动画效果 指定变化的时候是使用%，关键字"from"和"to"，这是和0％到100％相同（一般项目中都是用%）。

//动画平移
@keyframes mymove{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
}

//动画旋转
.ani{
    animation: mymove_1 2s infinite linear;
}
@keyframes mymove_1{
    from {
       transform: rotate(0deg);
    }
    to{
       transform: rotate(359deg);
   }
}

CSS伪类
定义：伪类用于定义元素的特殊状态

• 设置鼠标悬停在元素上时状态
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式
  选择器（伪类比较多，选择几个代表性的）

:active  选择活动的链接                    
:hover  选择鼠标悬停其上的链接。 
:first-child  选择作为其父的首个子元素的每个 <p> 元素。      
:last-child  选择作为其父的最后一个子元素的每个 <p> 元素。 
:nth-last-child(n)  选择作为父的第n个子元素的每个<p>元素，从最后一个子元素计数。             
:focus  选择获得焦点的元素。
:link  选择所有未被访问的链接。  
:visited  选择所有已访问的链接。

CSS伪元素
定义：伪元素用于设置元素指定部分的样式

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容
  选择器

::after  在每个 <p> 元素之后插入内容。
::before  在每个 <p> 元素之前插入内容。
::first-letter  选择每个 <p> 元素的首字母。
::first-line  选择每个 <p> 元素的首行。
::selection  选择用户选择的元素部分。

还有一个比较好认的，
伪类是一个:号；
伪元素是两个::号；

未完待续...