码迷,mamicode.com
首页 > Web开发 > 详细

css 3动画

时间:2017-07-29 15:18:48      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:常见   http   pos   bic   pause   one   use   back   需要   

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

第一部分:CSS Transition

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

img{
    transition: 1s;
}

上面代码指定,图片放大的过程需要1秒,效果如下。

我们还可以指定transition适用的属性,比如只适用于height

img{
    transition: 1s height;
}

这样一来,只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现,

在同一行transition语句中,可以分别指定多个属性

img{
    transition: 1s height, 1s width;
}
//这样一来,height和width的变化是同时进行的

我们希望,让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数

img{
    transition: 1s height, 1s 1s width;
}
// 让height先发生变化,等结束以后,再让width发生变化
  • 动画效果

transition的状态变化速度(又称timing function),默认不是匀速的,而是逐渐放慢,这叫做ease。

除了ease以外,其他模式还包括

(1)linear:匀速
(2)ease-in:加速
(3)ease-out:减速
(4)cubic-bezier函数:自定义速度模式
  •  transition的局限

transition的优点在于简单易用,但是它有几个很大的局限。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

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

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

第二部分:CSS Animation

首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。

div:hover {
  animation: 1s rainbow;
}

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

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

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放

div:hover {
  animation: 1s rainbow infinite;
}
//也可以指定动画具体播放的次数,比如3次
div:hover {
  animation: 1s rainbow 3;
}

2.2 animation-fill-mode  保持结束状态

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

div:hover {
  animation: 1s rainbow forwards;
}

animation-fill-mode还可以使用下列值

(1)none:默认值,回到动画没开始时的状态。
(2)backwards:让动画回到第一帧的状态。
(3)both: 根据animation-direction(见后)轮流应用forwards和backwards规则。

2.4 animation的各项属性

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
// 最后一项可以是 normal reserve 常见的两种,指定了东环播放的方向。

2.6 animation-play-state

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

如果想让动画保持突然终止时的状态,就要使用animation-play-state属性

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

上面的代码指定,没有鼠标没有悬停时,动画状态是暂停;一旦悬停,动画状态改为继续播放。效果如下。

css 3动画

标签:常见   http   pos   bic   pause   one   use   back   需要   

原文地址:http://www.cnblogs.com/21haoxingxiu/p/7255783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!