animation简介(初级)

animation动画简介
1.animation是什么
2.animation怎么用
3.animation使用详解

animation是什么

animation中文的意思是“动画,动画模块,动漫,动画片”,就是表示这是用来制定动画的css属性。
Web动画的实现原理,是利用了人眼的“视觉暂留”现象,在短时间内连续播放数幅静止的画面,使肉眼因视觉残象产生错觉,而误以为画面在“动”。著作权归作者所有。

Web动画中有几个主要的概念:

  • 帧:在动画过程中,每一幅静止画面即为一“帧”。
  • 帧率:即每秒钟播放的静止画面的数量,单位是fps(Frame per second)。
  • 帧时长:即每一幅静止画面的停留时间,单位一般是ms(毫秒)。
  • 跳帧(掉帧/丢帧):在帧率固定的动画中,某一帧的时长远高于平均帧时长,导致其后续数帧被挤压而丢失的现象。

CSS Animation制作Web动画分为三部分:

  • 声明动画:通过定制关键帧(@keyframes)来声明一个动画,这个关键相当于Flash动画、GIF动画图中的帧,主要用于控制CSS Animation效果
  • 调用动画:在CSS中对应的元素上通过animation属性调用声明好的对应动画,并且指定动画播放的一些特性,比如播放时间、播放函数等
  • 触发动画:最后一个环节是控制动画触发方式,就好比,我们视频做好了,默认有可能是播放的,也有可能是不播放的。在实际中我们要通过一定的触发方式来触发这些被引用的动画。
    系作者获得授权,非商业转载请注明出处。
    原文: http://www.w3cplus.com/animation/web-animation.html © w3cplus.com

css中的animation属性就是用来定义动画用的属性。

animation怎样使用

下边是使用使用animation的一个小例子:

<!DOCTYPE html>
<html>
<head>
    <title>animation</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position:relative;

            animation: mymove 5s infinite;
        }

        @keyframes mymove {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果如图
这里写图片描述
通过上边的例子可以看出@keyframes用来定义动画,animation属性用来引用使用动画。

animation使用详解

animation包括以下几个属性:

animation属性名说明
animation-name定义使用的动画名称,需要和@keyframes声明的动画keyframename|none(无动画效果)
animation-duration规定动画完成一个周期所花费的秒或毫秒time(秒[s]或毫秒[ms]计)
animation-timing-function动画的播放方式linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
animation-delay指定元素动画开始播放的时间time(秒[s]或毫秒[ms]计)
animation-iteration-count指定元素播放动画的循环次数n|infinite
animation-direction规定动画是否在下一周期逆向地播放normal|alternate
animation-play-state用来控制元素动画的播放状态paused|running
animation-fill-mode动画结束之后,关键帧值是否保留在结束状态时的值none|forwards|backwards|both
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值