【葡京娱乐平台】制作动画,用svg制作动画

运用 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

初稿出处: 坑坑洼洼实验室   

葡京娱乐平台 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg>
        <rect x="10" y="10" width="50" height="30">
            <animate attributeType="XML"
            attributeName="width"
            to="100"
            fill="freeze"
            dur="1s" />
        </rect>
    </svg>
</body>
</html>

svg援助动画

animate必须要写在要动的元素中
animate中有一些类型
attributeType:动画的类型
attributeName:动画的名称
begin:      动画开始的时间
from:       动画的开始
to:         动画的结束
dur (duration):持续时间
repeatCount:动画重复次数 indefinite(无数次)

首先我们定义一块画布,然后在上头画二个圆形。

一、Snap.svg是什么

从重大职能上说,Snap.svg.js 是2个操纵 SVG 节点/制作 SVG
动画的框架,不难题清楚能够看下面文字:

Snap.svg 是1个足以使你操纵 SVG 财富和 jQuery 操作 DOM 一样简单的类库

——译自官网

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ )
来做相比较最合适可是,很只怕作者也是参考了 JQ 的 API
设计,那么它们的1般程度有多高吗?请看下边包车型地铁比较表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap
的定义里,可操作的最外层的节点是 svg ,svg
节点的挑选、事件绑定都亟待在这一个上下文里达成。

在地点的对待图可以看出很多 JQ
的影子,无论是选择器、事件绑定、节点操作等等,都以越发的接近 JQ ,有 JQ
基础的同校基本得以半天左右 Snap 的整个 API。

一般的渐变效果

    <svg>
        <rect x='20' y='20' width='250' height='250'
        fill='red'>
          <animate attributeType="CSS"
      attributeName="xxx" begin="0s" from="1" to="0"
           dur="3s" repeatCount="3">
           </animate>
        </rect>
    </svg>

葡京娱乐平台 2

2、Snap 的代码结构

葡京娱乐平台 3

作者依照 Snap 的 API
制作了地方的图形,并且简单标注了诠释方便大家理解,能够重点关切一下
Element 和 Paper 那四个类。

途径运动

<svg style="background: lightpink;" width="800" height="800">
    <circle cx='65' cy='65' r='20' fill='red'>
        <animatemotion 
           path="M 10 60 L 150 60 30 180 55 20 80 180 Z"     
           dur="1s" repeatCount="indefinite">
        </animatemotion>
    </circle>
</svg>

他看起来应当是那个样子的:(每一个实例作者都会叠加图片以及demo链接,方便直观的精晓与源代码的查看,查看的时候请使用规范浏览器)

1. Element

其一有个别是节点操作相关的方法集,也是该类库最基础的一对。

JavaScript

// 采用节点 var svg = Snap(‘#svg’); svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

1
2
3
4
// 选择节点
var svg = Snap(‘#svg’);
svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

JavaScript

【葡京娱乐平台】制作动画,用svg制作动画。// 事件绑定 var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() {
// do something
});

越多措施请参见文后 API 资料。

变形(文字)

<svg style="background: lightgreen" width='800' height="500">
    <text x="100" y="100" font-size="30px" fill="red">我是文字
        <animateTransform attributeName="transform"
         attributeType="XML" type="rotate" dur="2s" begin="0s"
          from="0 150 150" to="360 150 150"  
           repeatCount="indefinite">
         </animateTransform>
    </text>
</svg>

在变形中type能够有rotate、scale等几系列型,从而他们的from to也都分裂

葡京娱乐平台 4

2. Paper

这一部分是画画相关的方法集,这是差不多各样动画框架都有个别有些,类似于createjs的Graphics。

SVG
有6种主干图形:矩形、圆形
、椭圆、线条、折线、多边形。还有其它1种:路径(path),path
是最复杂的一种绘图形式,它能够绘制复杂的图片——当然陆种基本图形也何足挂齿。而至于基本图像与
path 之间的更换,能够参见本站的其它1篇小说:聊天 SVG
基本造型转换那一个事。

葡京娱乐平台 5

Paper
方法集主要能够绘制陆种主导图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画多个圆 var svg = Snap(‘#svg’); svg.paper.circle({ cx: 100, cy:
100, r: 50, fill: ‘#f00’ });   // 创建一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap(‘#svg’);
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: ‘#f00’
});
 
// 创建一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

点击查看德姆o

叁. Snap 工具方法

Snap下有许多实用工具,比如
Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。

JavaScript

// 扩张Snap,为其增加插件方法 Snap.plugin(function (Snap, Element,
帕佩r, global, Fragment) { Snap.newmethod = function () {};
Element.prototype.newmethod = function () {}; Paper.prototype.newmethod
= function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

现行反革命我们就让这几个圆动起来

三、用 Snap 制作动画

葡京娱乐平台 6

一. 创设动画的方法

Snap 的做动画重点有二种艺术:

  • 使用 Element 里的 animate 方法,Element.animate(attrs, duration,
    [easing], [callback])
  • 使用 Snap 的静态方法,Snap.animate(from, to, setter, duration,
    [easing],
    [callback]),那种办法更通用也越来越强硬,内定早先终结值,setter里面可以放置多个节点的动画。

样例:演示Element.animate方法的使用。预览地址点此

JavaScript

// 动画样例一 var svg = Snap(‘#svg’); svg.select(‘circle’).animate({r:
十0}, 一千, mina.easeout(), function() { console.log(‘animation end’);
});   // 动画样例二 var svg = Snap(‘#svg’); var circle =
svg.select(‘circle’); var rect = svg.select(‘rect’); Snap.animate(0,
100, function(val) { circle.attr({r: val}); rect.attr({x: val}); },
1000, mina.easeout(), function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 动画样例1
var svg = Snap(‘#svg’);
svg.select(‘circle’).animate({r: 100}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
 
// 动画样例2
var svg = Snap(‘#svg’);
var circle = svg.select(‘circle’);
var rect = svg.select(‘rect’);
Snap.animate(0, 100, function(val) {
circle.attr({r: val});
rect.attr({x: val});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

葡京娱乐平台 7

动起来是那几个样子的(gif循环之后234八个demo将不恐怕区分,所以那里的gif只循环3次,需求反复翻看效果请刷新大概进入demo查看):

贰. 动画片的属性

在 Snap 中,可看作动画的习性有如何吗?小编大约分成了几类:

  • 大致数值类,如坐标、宽高、opacity、半数以上 Paper API
    可配备的属性值,甚至滤镜相关的性子。如{x:拾0} -> {x:200},
    {width:0} -> {width:100}
  • path 相关动画,如d属性(变形动画)、描边动画、路径跟随动画
  • matrix 类,放大缩短、位移、旋转等,和 CSS 的 transform 类似
  • 水彩类,颜色变换动画,如 fill、stroke 属性,如{fill:’#f00’} ->
    {fill:’#f0f’}

样例:颜色变换动画,预览地址点此

JavaScript

// 动画样例,颜色变化动画 var svg = Snap(‘#svg’); var circle =
svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
// 动画样例,颜色变化动画
var svg = Snap(‘#svg’);
var circle = svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

葡京娱乐平台 8

葡京娱乐平台 9

肆、path & matrix 动画详解

其一小节重点会讲下面第二小节提到的 path、matrix 相关动画方式,以及和 CSS
的 transform 动画的异同。

点击查阅德姆o

1. path 动画

大家能够看来圆动起来的时候,circle成分里边不再是空的,多了三个animate的要素,那个animate含有上面几特特性:

一). path 变形动画

这种类型的卡通片卓殊强大。上文已涉及基本图形和 path
可以相互转换的,所以基本图形间的变形动画也是起家的。不仅如此,更扑朔迷离的
path 图形,比如波浪、房子、小车、白云、小icon等,都以能够相互变形。

path 的d属性在 Snap
的辨析规则里能够经过1三种的数学生运动算,动画中经过插值,达到最后态的d值,但是中间的插值计算大家鞭长莫及干预。

JavaScript

// 开始态 var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() { // 终止态:曲线变直 // path.animate({d: ‘M一,十0
L350,十0’}, 1000, mina.easeout(), function() { // console.log(‘animation
end’); // }); // 终止态:心形 path.animate({d: ‘M114.500,5八.500
C十6.230,5八.75壹 2三.907,-3七.26二 5.500,二1.500 C-26.75玖,1二4.483
111.7六一,2二一.360 11九.500,21九.500 C15肆.46肆,21一.096 201.23肆,14玖.580
220.500,104.500 C250.260,3四.86四 220.8玖2,7.15九 1玖四.500,一.500
C160.45伍,-五.800 12二.344,5八.262 11四.500,58.500 Z’}, 一千, mina.easeout(),
function() { console.log(‘animation end’); }); }, 1000);

1
2
3
4
5
6
7
8
9
10
11
12
// 开始态
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() {
// 终止态:曲线变直
// path.animate({d: ‘M1,100 L350,100’}, 1000, mina.easeout(), function() {
// console.log(‘animation end’);
// });
// 终止态:心形
path.animate({d: ‘M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
}, 1000);

样例:曲线变直线,预览地址点此

葡京娱乐平台 10

样例:曲线变心形,预览地址点此

葡京娱乐平台 11

葡京娱乐平台 12

2). path 描边动画

那种动画首要用的是 svg 的 stroke-dasharray、stroke-dashoffset
属性,那中卡通方式在本站的其它壹篇小说有详尽介绍,那里不再赘述:三看
SVG Web 动效

样例:简单曲线描边动画

JavaScript

var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′, stroke:’#f00’, fill:
‘rgba(0,0,0,0)’}); var length = Snap.path.getTotalLength(path);
path.attr({ ‘stroke-dashoffset’: length, ‘stroke-dasharray’: length //
用Snap的API计算复杂的path长度 }); Snap.animate(length, 0, function(val)
{ path.attr({ ‘stroke-dashoffset’: val }); }, 一千, mina.easeout(),
function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′, stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
var length = Snap.path.getTotalLength(path);
path.attr({
‘stroke-dashoffset’: length,
‘stroke-dasharray’: length // 用Snap的API计算复杂的path长度
});
Snap.animate(length, 0, function(val) {
path.attr({
‘stroke-dashoffset’: val
});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

葡京娱乐平台 13

或者用CSS实现:

CSS

@keyframes demo4 { 100% { stroke-dashoffset: 0 } } .demo4 { animation:
demo4 1s ease-out infinite both; }

1
2
3
4
5
6
7
8
@keyframes demo4 {
100% {
stroke-dashoffset: 0
}
}
.demo4 {
animation: demo4 1s ease-out infinite both;
}

样例:花纹描边。那是codepen上四个繁杂的例证——复杂花纹的描边动画,预览地址点此:

葡京娱乐平台 14

attributeName:动画属性名,顾名思义,你想要改变哪个属性

3). path 路径跟随动画

那种动画是指一个 svg
节点(基本图形、文本、图片等)沿着轨迹移动的卡通,主要适用于模拟交通工具航行轨迹、粒子散开轨迹等。

那种动画的重大之处在于要了解 path 的长短与坐标之间的应和关系,Snap
提供了可供获取path的长度以及根据长度获取地方坐标
API。结合方面包车型大巴 Snap.animate 方法,路径跟随动画的构建会变得万分简单。

样例:跟随曲线运动的小飞机,预览地址点此:

JavaScript

var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) { var point =
Snap.path.getPointAtLength(path, val); // 依照path长度变化获取坐标 var m
= new Snap.Matrix(); m.translate(point.x, point.y);
m.rotate(point.阿尔法-90); //
使飞机总是朝着曲线趋势。point.阿尔法:点的切线和程度线形成的夹角
plane.transform(m); }, 贰仟0, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) {
var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标
var m = new Snap.Matrix();
m.translate(point.x, point.y);
m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha:点的切线和水平线形成的夹角
plane.transform(m);
}, 30000, mina.easeout(), function() {
console.log(‘animation end’);
});

葡京娱乐平台 15

样例:双1二开场动画,那是小编二零一八年双12做的二个途径跟随动画效果,预览地址点此:

葡京娱乐平台 16

其它,用新的 CSS 属性 motion-path
也足以兑现类似意义,但当下支撑程度堪忧,唯有 PC 的 chrome 以及
Opera、最新的X5内核手提式有线电话机浏览器 帮忙情状较好。

CSS

@keyframes demo5 { 0% { motion-offset: 0; } 百分百 { motion-offset: 100%;
} } .demo伍 { motion-path:
path(“M2二一.71二,180.442C二37.17六,17七.72八,27九.348,178.0九四,贰六壹,15二c-1八.74二-二陆.65四-48.5四3-2捌.207-陆三-2二-1肆.九8一,陆.43一-3四.76三,6.357-3四,40s6陆.0玖,74.16贰,8八,6捌,60.35捌-二3.74二,67-4九,14.21一-5玖.957-27-捌1S1陆叁.68捌,8八.66四,15三,九八c-七.82八,陆.83八-3贰.04伍,2二.95二-3二,64,0.03玖,3伍.49一,七.87八,6贰.872,14,7八s5二.73柒,3玖.5五7,7叁,4一,5八.638,1陆.552,十5-七c4肆.249-2二.47八,7伍.07三-玖四.40九,55-164C34九.768,四陆.7玖2,2一7.14二,5四.51玖,200,55S10四.陆1三,6六.12八,7八,111c-1陆.92二,2八.53二-1陆.5,九6.61陆,一,134,1四.4八二,30.93贰,5一.8捌,58.5二,68,64,3玖.98八,壹叁.593,拾0.0八1,二壹.陆一5,12九,17”);
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线 animation: demo5
10s linear infinite both; }

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes demo5 {
0% {
motion-offset: 0;
}
100% {
motion-offset: 100%;
}
}
.demo5 {
motion-path: path("M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17");
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线
animation: demo5 10s linear infinite both;
}

预览地址点此(请在最新版
chrome、Opera 或流行的X伍内核手提式无线话机浏览器查看)

attributeType:动画属性的体系,常见的七个值,XML和css,取决于属性是在xml里照旧在style里,上边改变opacity的demo里,正是利用的css。不写的时候暗许值为auto,他会先搜索css,建议写上。

2. matrix动画

Snap 的 matrix 动画包蕴各位熟知的 translate/scale/rotate/skew
动画,原理和 CSS 的 transform 也大致相同。

一)
matrix简单位活动画,预览地址点此:

葡京娱乐平台 17

JavaScript

// 不难位活动画 var rect = svg.paper.rect({x: 十0, y: 100, width: 50,
height: 30, fill: ‘#f00’}); var anim = function() { Snap.animate(0,
150, function(val) { var m = new Snap.Matrix(); m.translate(val, 0); //
translate位移API rect.transform(m); // 在rect节点应用matrix }, 一千,
mina.easeout(), function() { console.log(‘animation end’);
setTimeout(anim, 300); }); } anim();

1
2
3
4
5
6
7
8
9
10
11
12
13
// 简单位移动画
var rect = svg.paper.rect({x: 100, y: 100, width: 50, height: 30, fill: ‘#f00’});
var anim = function() {
Snap.animate(0, 150, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0); // translate位移API
rect.transform(m); // 在rect节点应用matrix
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
setTimeout(anim, 300);
});
}
anim();

二)
matrix位移、旋转复合动画,预览地址点此:
葡京娱乐平台 18

JavaScript

// 位移、旋转复合动画 var rect = svg.paper.rect({x: 10, y: 100, width:
50, height: 30, fill: ‘#f00’}); var g = svg.paper.group(rect); //
创立了多少个分组节点g作为位移动画节点 var anim_rotate = function() { //
节点旋转部分 Snap.animate(0, 250, function(val) { var m = new
Snap.Matrix(); m.rotate((val/250)*360, 十+25, 100+一伍); //
注意,前面两位数是旋转大旨点,属于相对坐标,svg里节点的转换中央都以相对坐标,和CSS的transform-origin取值不太一致
rect.transform(m); }, 500, mina.easeout(), function() {
console.log(‘animation end’); anim_rotate(); }); }; anim_rotate(); var
anim_move = function() { // 节点位移部分 Snap.animate(0, 250,
function(val) { var m = new Snap.Matrix(); m.translate(val, 0);
g.transform(m); }, 3000, mina.easeout(), function() {
console.log(‘animation end’); anim_move(); }); }; anim_move();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 位移、旋转复合动画
var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: ‘#f00’});
var g = svg.paper.group(rect); // 创建了一个分组节点g作为位移动画节点
var anim_rotate = function() { // 节点旋转部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.rotate((val/250)*360, 10+25, 100+15); // 注意,后面两位数是旋转中心点,属于绝对坐标,svg里节点的变换中心都是绝对坐标,和CSS的transform-origin取值不太一样
rect.transform(m);
}, 500, mina.easeout(), function() {
console.log(‘animation end’);
anim_rotate();
});
};
anim_rotate();
var anim_move = function() { // 节点位移部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0);
g.transform(m);
}, 2000, mina.easeout(), function() {
console.log(‘animation end’);
anim_move();
});
};
anim_move();

上面三个卡通用 CSS 的方式福寿康宁代码如下:

CSS

@keyframes demo6 { 百分百 { transform: translate三d(250px, 0, 0); } } //
简单位活动画CSS版 .demo陆 { animation: demo6 2s linear infinite both; }  
@keyframes demo7_rotate { 100% { transform: rotate(360deg); } }
@keyframes demo7_move { 百分百 { transform: translate三d(250px, 0, 0); } }
// 旋转、位移符合动画CSS版 .demo7 { animation: demo七_move 2s linear
infinite both; rect { transform-origin: 35px 115px; animation:
demo7_rotate .5s linear infinite both; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@keyframes demo6 {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 简单位移动画CSS版
.demo6 {
animation: demo6 2s linear infinite both;
}
 
@keyframes demo7_rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes demo7_move {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 旋转、位移符合动画CSS版
.demo7 {
animation: demo7_move 2s linear infinite both;
rect {
transform-origin: 35px 115px;
animation: demo7_rotate .5s linear infinite both;
}
}

简单易行位移动画CSS版预览点此;旋转、位移符合动画CSS版预览点此。

from to :性的发端和了结值,from可选,当不写的时候会取暗许值。

相关文章