CSS3 animation(动画) 属性

28 篇文章 0 订阅
4 篇文章 0 订阅

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

语法

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

值 1 说明
animation-name 规定需要绑定到选择器的keyframe名称。
animation-duration 规定动画所花费的时间,以秒或毫秒计
animation-timing-funcion 规定动画时的速度曲线
animation-delay 规定动画开始前的延迟
animation-iteration-count 规定动画播放的次数
animation-direction 规定是否应该轮流反向播放动画
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
初始值
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
animation-name属性

为 @keyframes 动画指定一个名称

语法

animation-name: keyframename|none;

@keyframes 动画指定一个名称::
animation-name:mymove;
-webkit-animation-name:mymove; /* Safari 和 Chrome */
animation-duration 属性

定义动画完成一个周期需要多少秒或毫秒。 语法 animation-duration: time;

div
{
	animation:mymove infinite;
	animation-duration:2s;
	/* Safari and Chrome */
	-webkit-animation:mymove infinite;
	-webkit-animation-duration:2s;
}

@keyframes mymove
{
	from {opacity:1;}
	to {opacity:0;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {opacity:1;}
	to {opacity:0;}
}
animation-timing-function 属性

animation-timing-function指定动画将如何完成一个周期。 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。 速度曲线用于使变化更为平滑。

语法

animation-timing-function: value;

描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
从开始到结束以相同的速度播放动画:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
animation-delay 属性

animation-delay 属性定义动画什么时候开始。 animation-delay 值单位可以是秒(s)或毫秒(ms)。 提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

等待两秒,然后开始动画:
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */

animation-iteration-count 属性 animation-iteration-count属性定义动画应该播放多少次。 语法 animation-iteration-count: value; value可取具体数值n,或者infinite(无限次)

播放三次动画:
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/
animation-direction 属性

animation-direction 属性定义是否循环交替反向播放动画。 注意:如果动画被设置为只播放一次,该属性将不起作用。 CSS 语法 animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; 属性值

描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
先执行一遍动画,然后再反向执行一遍动画:
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
animation-fill-mode 属性

animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

CSS 语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

属性值
描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后(由 animation-iteration-count
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。
both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
把物体动画地从一个地方移动到另一个地方,并让它停留在那里:
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
语法

animation-play-state: paused|running; paused 指定暂停动画 running 指定正在运行的动画

animation-play-state 属性

animation--play-state属性指定动画是否正在运行或已暂停。 注意:在JavaScript中使用此属性在一个周期中暂停动画。

暂停动画:
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 animation属性是用来定义一个元素的动画效果。它包括了多个子属性,如animation-name、animation-durationanimation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。 其animation-name用来定义动画的名称,animation-duration用来定义动画的持续时间,animation-timing-function用来定义动画的时间函数,animation-delay用来定义动画的延迟时间,animation-iteration-count用来定义动画的播放次数,animation-direction用来定义动画的播放方向,animation-fill-mode用来定义动画结束时元素的样式,animation-play-state用来定义动画的播放状态。 更具体地说,animation-name用来绑定动画规则到选择器上,而animation-duration用来定义动画播放一次的时间长度。animation-timing-function则用来定义动画的时间函数,控制动画的速度曲线。animation-delay用来定义动画开始播放的延迟时间,而animation-iteration-count用来定义动画的重复次数。animation-direction则用来定义动画播放的方向,可以是正向、反向或循环播放。animation-fill-mode则用来定义动画在播放前和播放后所应用的样式,可以是保持初始状态或保持最后状态。最后,animation-play-state用来定义动画的播放状态,可以是暂停或播放。 综上所述,CSS3 animation属性是用来定义元素的动画效果的,它包括了多个子属性,每个属性都有自己的作用,用来控制动画的各个方面,如持续时间、播放次数、延迟时间等。通过合理使用这些属性,可以创建出各种丰富多样的动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css3动画属性animation](https://blog.csdn.net/qq_40340943/article/details/100733638)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [css动画-animation各个属性详解](https://blog.csdn.net/weixin_45810135/article/details/108921359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值