栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

不需要借助JS和CSS3就能完成的动画(二)

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

不需要借助JS和CSS3就能完成的动画(二)

1、接上篇SVG动画的属性详解

1.1 animation参数

1.1.1 attributeName

你想改变的属性名称,① 可以是元素直接暴露的属性,例如,以上案例出现的改变x, y又或者font-size; ② 可以是CSS属性。例如,透明度opacity.


1.1.2 attributeType

attributeType支持三个固定参数,CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值,自动判别的意思(实际上是先当成CSS处理,如果发现不认识,直接XML类别处理)。因此,如果你不确信某属性是XML类别还是CSS类别的时候,我的建议是不设置attributeType值,直接让浏览器自己去判断,几乎无差错。

我想大家都有和我一样的疑问:“既然浏览器酱可以自己判断属性类别,那这个属性还有什么意义吗?”可能某些属性,XML有其作用,CSS也有其作用,例如font-size, 此时就需要明确下归属。

1.1.3 from to by values dur

from = ““

动画的起始值。

to = ““

就是to的值

指定动画的结束值。(绝对)

by=

by最后的结束值=from的值+by的值

指定动画的结束值(相对)

Values=(可以存在多个)

dur = ““

完成动画的时间

1.1.4 begin end

begin指动画开始的时间,看上去很简单。设个时间,延迟嘛~~实际上非也非也,上面出现的beigin="3s"只是最简单最基本的表示。

begin的定义是分号分隔的一组值。看到没?是一组值,单值只是其中的情况之一。例如,beigin="3s;5s"表示的是3s之后动画走一下,6s时候动画再走一下(如果之前动画没走完,会立即停止从头开始)。所以,如果一次动画时间为3s, 即dur="3s",同时没有repeatCount属性时候,我们可以看到动画似乎连续执行了2次。

begin的值可以是触发事件

begin的值可以是某个动画执行n次之后


1.1.5 repeatCount,repeatDur

repeatCount表示动画执行次数,可以是合法数值或者”indefinite“(动画循环到内存耗尽)。

repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite(动画循环到内存耗尽)。



作者:陆家嘴种菜
链接:https://www.jianshu.com/p/f0f5e2ababea


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242891.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号