css 动画 transition及animation

最新推荐文章于 2025-04-20 15:12:11 发布

哈哈xylan

最新推荐文章于 2025-04-20 15:12:11 发布

阅读量587

点赞数

分类专栏： CSS

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS3中的过渡（transition）和动画（animation）技术。过渡允许平滑改变元素的样式属性，而动画则能创建更复杂的视觉效果。文章详细解释了两者的语法、特性和局限性，并提供了实例。

文章原址：

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

css 动画阮一峰

笔记：

一、Transition（过渡）：

作用：在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

transition的作用在于，指定状态变化所需要的时间。

语法：

1.transition简写属性：

transition: property duration timing-function delay;

1)例如：

使图片1秒内高度变化

img{  
  width:100px;
  height:100px;
 transition: 1s height;
}


img:hover{
  width:300px;
  height:300px;
}

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

2)例如：

使图片1秒内高度变化，宽度延时1秒后，1秒内宽度变化。

div
{
  width:100px;
  transition: width 2s,height 2s;
｝

2.完整属性名称：

transition-property: ;       //设置属性值，例如width,
transition-duration: ;       //
transition-timing-function: ;//过渡方式：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition-delay: ;          //

注：

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Chrome 25 以及更早的版本，需要前缀 -webkit-。

3.transition的使用注意

（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

（2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。

（3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

4.transition的局限

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

二、animation（动画）：

1.Animation ：

作用：将动画与元素绑定。

用法：需要指定动画一个周期持续的时间，以及动画效果的名称。

animation: name duration timing-function delay iteration-count direction;

属性全称：

animation-name:;                   //绑定到选择器的 keyframe 名称。
animation-duration:;               //规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:; //规定动画的速度曲线
   
animation-delay:                   //规定在动画开始之前的延迟。
animation-iteration-count:         //规定动画应该播放的次数。n|infinite(无限次播放)
animation-direction:               //规定是否应该轮流反向播放动画。normal|alternate（轮流反向播放）|reverse|alternate-reverse;

例如：


div:hover {
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。

其他属性：

1）animation-fill-mode：动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

-none：默认值，回到动画没开始时的状态

-forwards：表示让动画停留在结束状态

-backwards：让动画回到第一帧的状态。

-both: 根据animation-direction（见后）轮流应用forwards和backwards规则。

2）steps函数:可以实现分步过渡


div:hover {
  animation: 1s rainbow infinite steps(10);
}

3)animation-play-state:

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。

-paused：暂时

-running：继续播放

2.@keyframes:

作用：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

它是用来定义一个动画效果，动态的执行过程中需要变化的部分。这个动画名称会用于animation中。

语法：

支持的属性from,to或百分比

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。