css3旋转动画循环(html5 3d旋转动画效果)

css3 由小变大然后一直旋转的动画怎么做

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：

!DOCTYPE?html??

html??

head??

????titleHTML5/title??

????meta?charset="utf-8"

????meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0"?/??

????style?type="text/css"

????????img{width:?200px;}

????????.div1{width:?200px;height:?200px;border:1px?solid?#000;margin:?150px?auto;}

????????.animate1{

????????????-webkit-animation:??move1?2s?infinite;

????????}

????????.animate2{

????????????-webkit-animation:??move2?1s?infinite;

????????}

????????@-webkit-keyframes?move1{

????????????0%{

????????????????-webkit-transform:scale(1);

????????????}

????????????100%{

????????????????-webkit-transform:scale(1.5);

????????????}

????????}

????????@-webkit-keyframes?move2{

????????????0%{

????????????????-webkit-transform:?rotateZ(0deg)?scale(1.5);

????????????????-webkit-transform:;

????????????}

????????????100%{

????????????????-webkit-transform:?rotateZ(360deg)?scale(1.5);

????????????}

????????}

????/style

/head??

body?

????div?class="div1?animate2"/div

????script?type="text/javascript"

????????window.onload=function(){

????????????var?oDiv=document.querySelector(".div1");

????????????oDiv.className="div1?animate1";

????????????setTimeout(function(){

????????????????oDiv.className="div1?animate2";

????????????},2000);

????????}

????/script??

/body??

/html

原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。

当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。

css3 实现动画效果，怎样使他无限循环动下去？

一、实现CSS3无限循环动画代码示例。

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg);

border:5px solid red;

}

50%{

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

}

100%{

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

}

}

.loading{

border:5px solid black;

border-radius:40px;

width: 28px;

height: 188px;

-webkit-animation:gogogo 2s infinite linear ;

margin:100px;

}

扩展资料

实现动画无限循环所需要的CSS属性说明：

1、infinite

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

css3动画使用

animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如：

调用关键帧：

语法 animation:animation-name?animation-duration?animation-timing-function??animation-delay?animation-iteration-count animation-direction

animation-name 由?@keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放

练习如下：

该图形的变化从左上角到右上角来回跳动的一个过程

linear ?规定以相同速度开始至结束的过渡效果

ease ?规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out ?规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

?perspective:500px;透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 ?距离物体越近 物体就越大，距离物体越远 物体就越小

transform: rotateZ(30deg)?rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转?正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转?正值是向里面旋转?负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

?transform: translate3d(0, 0, 200px);效果如下:

?translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）

?translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

?要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat，?想变成3d效果要把值设置成preserve-3d

也可以?设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right

css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。

循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。

物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。

动画中的常用方法：

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。

但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。

css3 如何让一个图片不断翻转

/*?css3?让一个图片不断翻转示例代码?*/

#gavinPlay{

/*?background:color?url?x?y?repeat?图片来自百度图片，按需要更换?*/

background:red?url(";fm=80")?center?no-repeat;

/*?background-size:auto?auto?||?cover?代表以宽或高填满元素背景?*/

background-size:cover;

/*?随便设置宽高值，测试?*/

width:200px;

height:200px;

/*?设置默认样式，开启3d硬件加速?*/

-webkit-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

/*?设置动画，animation:动画名称?动画播放时长单位秒或微秒?动画播放的速度曲线linear为匀速?动画播放次数infinite为循环播放;?*/

-webkit-animation:play?3s?linear?infinite;

-moz-animation:play?3s?linear?infinite;

animation:play?3s?linear?infinite;

}

@-webkit-keyframes?play{

0%??{

/*

水平翻转

*/

-webkit-transform:rotateY(0deg);

/*

垂直翻转

-webkit-transform:rotateX(0deg);

顺时针旋转

-webkit-transform:rotate(0deg);

逆时针旋转

-webkit-transform:rotate(0deg);

*/

}

100%?{

/*?水平翻转?*/

-webkit-transform:rotateY(360deg);

/*?垂直翻转

-webkit-transform:rotateX(360deg);

顺时针旋转

-webkit-transform:rotate(360deg);

逆时针旋转

-webkit-transform:rotate(-360deg);

*/

}

}

@-moz-keyframes?play{

0%??{

-moz-transform:rotateY(0deg);

/*

-moz-transform:rotateX(0deg);

-moz-transform:rotate(0deg);

-moz-transform:rotate(0deg);

*/

}

100%?{

-moz-transform:rotateY(360deg);

/*

-moz-transform:rotateX(360deg);

-moz-transform:rotate(360deg);

-moz-transform:rotate(-360deg);

*/

}

}

@keyframes?play{

0%??{

transform:rotateY(0deg);

/*

transform:rotateX(0deg);

transform:rotate(0deg);

transform:rotate(0deg);

*/

}

100%?{

transform:rotateY(360deg);

/*

transform:rotateX(360deg);

transform:rotate(360deg);

transform:rotate(-360deg);

*/

}

}

!--?html?布局代码?--

div?id="gavinPlay"/div