CSS中的transition属性

CSS中的transition属性可以让你在一定的时间间隔内平滑地改变一个元素从一个样式到另一个样式。这个属性主要应用于以下几种CSS属性：

• 宽度（width）
• 高度（height）
• 背景颜色（background-color）
• 颜色（color）
• 位置（position）
• 透明度（opacity）
• 字体大小（font-size）等

例如，如果你想让一个元素的背景颜色在两秒内平滑过渡，可以这样写：

div {  
  background-color: red;  
  transition: background-color 2s;  
}

当div的背景颜色发生变化时，它将在一个2秒的过渡期间平滑地从红色变为新的颜色。

此外，还可以使用transition属性来指定转变过程中的速度曲线，例如：

div {  
  background-color: red;  
  transition: background-color 2s ease-in-out;  
}

在这个例子中，转变过程的速度曲线是ease-in-out，这意味着转变开始时会缓慢，然后速度会增加，在转变结束前会再次减慢。

其他

在CSS中，transition属性是一个简写属性，用于设置四个过渡属性：transition-property、transition-duration、transition-timing-function和transition-delay。这些属性的顺序是固定的，必须按照指定的顺序排列。

例如，以下代码将使元素的背景颜色在2秒内平滑过渡，并在1秒后开始过渡效果：

div {  
  background-color: red;  
  transition: background-color 2s ease-in-out 1s;  
}

选中全部属性：transition:all 3s;

(转换属性名称)
transition-property
(转换时间)
transition-duration
(转换曲线)
transition-timing-function
(延时)
transition-delay

转换曲线
linear(匀速)
ease(慢快慢)
ease-in(慢快)
ease-out(快慢)
ease-in-out(慢快慢)比ease慢些

创建动画
@keyframes  动画名{
       from{}
         to{
      transform:translatex(1222px);
        }
}

animation:动画名  1s  1(次数)(infinite无穷)  alternate(原路返回) ;

animation:start 4s 1  forwards(停留在最后)

.box:hover{
        animation-play-state:paused;
}