关键帧动漫

考虑浏览器支不支持;
语法:@keyframe animationname{
   keyframes-selector {css-styles;}
}

说明:
animationname:声明动画名称。

keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用“from”和“to”的形式。
“from”和“to”的形式等价于0%和100%。

建议始终使用百分比形式。
@keyframes规则和所有动画属性

属性                      描述
animation            所有动画属性的简写属性,除了animation-play-state属性。

animation-name   规定@keyframes动画的名称。
animation-
规定动画完成一个周期所花费的秒或毫秒。默认是0.

animation-timing-function 规定3D元素的透视效果。
animation-delay     规定动画何时开始。默认是0;

animation-iteration-count 规定动画被播放的次数。默认是1
语法:animation-timing-function:value;

说明:
animation-timing-function 规定动画的速度曲线。

linear:动画从头到尾的的速度是相同的。
ease:默认。动画以低速度开始,然后加快,在结束前变慢。

ease-in:动画以低速度开始
ease-out:动画以低速度结束

ease-in-out:动画以低速度开始和结束
cubic-bezier(n,n,n,n):在函数中自己的值,可能的值是从0到1的数值

语法:animation-direction:normal|alternate;
说明:

animation-direction 属性定义是否应该轮流反向播放动画。
如果animation-direction值是“alternate”,则动画会在奇数次数(1,3,5等等)正常播放,er在偶数次数(2,4,6等等)向后播放。

normal:默认值。动画应该正常播放。
alternate:动画应该轮流反向播放

语法:animation-play-state:paused|running;
说明:animation-play-state 属性规定动画正在运行还是暂停。

注释:您可以在javaScript中使用该属性,这样就能播放过程中暂停动画。
paused:规定动画已暂停。

running:规定动画正在播放。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  .box {width:100px;height:100px;background:#f00;pasition:relative;
  animation-name:aa;animation-duration :2s;animation-timing-function:linear;animation-direction:alternate}
  @keyframes aa {
	  from {left:0;top:0;}
	  to {left:200px;top:0;}
  }

</style>
</head>

<body>
<div class="box"></div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三日沐水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值