css3动画原理（css3 下划线动画 特效是什么原理）

本文目录

• css3 下划线动画 特效是什么原理
• 如何停止CSS3的动画

css3 下划线动画 特效是什么原理

什么动画，如果是一下子出现的，应该是hover；如果是慢慢出现应该是transition或者animation

如何停止CSS3的动画

　　们在移动端一般使用zepto框架，与其说zepto是jquery的轻量级替代版，不如说是html5替代版
　　我们在js中会用到animate方法执行动画，这个家伙可是真资格的动画，完全是css一点点变化的！
　　而zepto则不然，使用的是HTML5/CSS3的方案，而CSS相关是不保存元素状态值的，也没办法保存，所以停止动画就成了一大问题
　　我们今天就一起来讨论下相关停止动画的方案，反正没有什么好的......
　　CSS3动画原理
　　在现有浏览器中，一般有两种模式（我只知道两种）：
　　一种是js动画，他是动态改写元素的style实现动画，所以任意时间想停止动画都是没问题的，因为我们可以获得各个阶段的状态值
　　另一种就是CSS3动画了，至于CSS3动画的原理，我不知道但是可以说一点的就是——见代码
***隐藏网址***
***隐藏网址***
　　3 《head》
　　4 《title》《/title》
　　5 《script id="Script1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"》《/script》
　　6 《/head》
　　7 《body》
　　8 《div id="Div1" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
　　9 left: 0; border: 1px solid black; "》
　　10 《/div》
　　11 《/body》
　　12 《script src="../zepto.js" type="text/javascript"》《/script》
　　13 《script type="text/javascript"》
　　14 var d = $(’#d’);
　　15 d.animate({
　　16 left: ’100px’
　　17 }, 10000);
　　18
　　19 setTimeout(function () {
　　20 d.html(’left: ’ + d.css(’left’));
　　21 }, 1);
　　22
　　23 《/script》
　　24 《/html》
***隐藏网址***
　　zepto的animate事实上马上就改变了style的值，所以我们在里面看到了left为100px，虽然他正在运动
　　而他动画的实现事实上使用的是CSS3的transition动画属性，我们这里来看看zepto的源码：
　　View Code
　　最后实际上是执行anim实现我们的动画，大家注意看这里
　　$(this).css(cssReset)
　　this.css(cssValues)
　　他事实上搞了个先设置动画属性，再给style属性给元素，所以会产生动画
　　到此，zepto实现动画原理我们大概知道了，现在问题就是如何停止他了，所以我们继续往下看
　　如何停止动画
　　我们先看看这个东西：
***隐藏网址***
***隐藏网址***
　　3 《head》
　　4 《title》《/title》
　　5 《script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"》《/script》
　　6 《/head》
　　7 《body》
　　8 《div id="Div2" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
　　9 left: 0; border: 1px solid black;"》
　　10 《/div》
　　11 《/body》
　　12 《script src="../zepto.js" type="text/javascript"》《/script》
　　13 《script type="text/javascript"》
　　14 var d = $(’#d’);
　　15 d.animate({
　　16 left: ’100px’
　　17 }, 10000);
　　18
　　19 setInterval(function () {
　　20 d.html(’left: ’ + d.css(’left’) + ’ _ offsetLeft: ’ + d.offsetLeft);
　　21 }, 1);
　　22
　　23 《/script》
　　24 《/html》
***隐藏网址***
　　其中虽然left一开始就变了，我们惊奇的发现，offset这个家伙居然保存了我们的状态！！！
　　我和我的小伙伴都惊呆了，因为我之前一直以为什么状态都不能获得，于是我们为他加上mousedown事件，各位运动时候点击试试
　　我们这里这样干了下：
***隐藏网址***
***隐藏网址***
　　3 《head》
　　4 《title》《/title》
　　5 《script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"》《/script》
　　6 《/head》
　　7 《body》
　　8 《div id="Div3" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
　　9 left: 0; border: 1px solid black;"》
　　10 《/div》
　　11 《/body》
　　12 《script src="../zepto.js" type="text/javascript"》《/script》
　　13 《script type="text/javascript"》
　　14 var d = $(’#d’);
　　15 d.animate({
　　16 left: ’100px’
　　17 }, 10000);
　　18
　　19 setInterval(function () {
　　20 d.html(’left: ’ + d.css(’left’) + ’ _ offsetLeft: ’ + d.offsetLeft);
　　21 }, 1);
　　22
　　23 d.mousedown(function (e) {
　　24 console.log(d);
　　25 d.css(’transition’, ’left 0s linear’);
　　26 d.css(’left’, d.offsetLeft + ’px’);
　　27 });
　　28
　　29 《/script》
　　30 《/html》
　　于是我们发现，动画停止了，亲！他真的停止了！！！
　　PS：因为项目过程中，我这里要模仿类似iscroll的滚动效果，所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
　　结语
　　本来这里还想深入一点研究下的，但是现在时间有点来不及，事情有点多，暂时到这里了吧，具体的demo争取周末搞出来