关于animation的一些简单基础和使用方法记载

2018-06-27 09:07:35来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

第一次写博客,只是单纯的想把我自己的一些心得和使用过的css3的animation的一些方法记录和总结,方便下次使用,我写的这些都是刚入门适合做一些简单的动画动作,过于复杂的还有待发掘或者使用别的方法实现。

那么先简单说说animation的使用方法:

animation的语法就是如上图所示,要了解具体每个属性怎么用,点击这里,而且通常还要考虑到不同浏览器的问题,通常都会有加-webkit- /* 兼容Safari and Chrome */,实际看开发需求使用。

 

1、首先下面这种是一个不透明的从无过渡到原图的方法,transfrom是过渡元素从0倍到1倍的意思。

2、这种是用于把照片从透明逐步显示出来,开始时候记得设置图片或者div属性为opacity:0;通过百分比显示不同时间段的透明度。

3、从底部或顶部,或者是左右两边横出,或者是从某个位置到某个位置,基本都是从下面这个可以改进,注意位置即可,opacity:1是一直不透明,如果你需要动画在移动过程中透明度改变可以结合上面2的方法控制。

4、这个是可以使图片左右摇摆的方法,可以通过animation的infinite使图片处于一个无限左右摇摆的状态,摇摆幅度可以自己修改里面参数

5、继续更新这个随笔,因为随着用animation做的动画多了,发现了from-to这个用法可能有bug,我先说出来参考,就是隔一段时间重复一次动作,这是我无意发现的,所以如果有网友用from-to写动作时候,建议用0%-100%这种方法更好,如果有网友也遇到这问题,欢迎分享其它解决方法。

以下这种是往左飘,并且是透明变不透明:注意是你图片摆放位置的百分比多少,你就从百分比多少开始写起,这种方法主要适用于云层重复飘,或者是下雨,或者是各种散开,聚合动作

图片的定位

不透明-透明的左飘动作,其它方向的飘动只要改一下定位即可

使用动作:

6、将图片360翻转,与4的方法接近,但是更直接,通过rotate(角度),可以这么理解,控制哪个时间翻转多少度,它还有rotateX,绕着X轴旋转多少度;rotateY,绕着Y轴旋转多少度(适用于2d旋转);rotateZ,绕着Z轴旋转多少度(用于3d旋转);

我是让图片无限旋转下去,如果你还想图片能反转旋转,可以在添加alternate属性。

7、在实现动画过程中,可能有需要实现当这个动作完成后,这个图片会消失,然后另外一组动作出现,这是一个挺常见的情况,那么怎么实现这个过程:把这个消失的动画代码如下

大家应该发现所谓的消失只是把图片透明度设置为0,让它消失在画面上,然后通过下图这个

$('要消失图片的id')bind("webkitAnimationEnd",function(){

$('#moveLine1').removeAttr('class');
$('#moveLine1').attr('class','p11-21-moveline2');

}

意思代码意思是通过动作结束后,把原有的动画类删除了,添加新的动画类,就可以实现在一组动作结束后,会出现另外一种动作

8、这种是出现方式是从小到大,然后恢复正常大小出现,我们首先可以设置它的透明度,通过scale(图片倍数)这个属性和百分比控制出现时候的照片大小,你可以在50%的时候设置scale(1.5)意思是图片原有大小的1.5倍,最后100%时候到1倍就可以实现出现从小到大,到照片大小的出现方法

 

如果有什么疑问,欢迎大家一起交流,一起学习.

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中

下一篇:Flex布局的学习经验