css3动画教程菜鸟教程

css3怎么制作打开的大门动画

1首先，先在《body》《/body》中加入门
《div class=“leftDoor“》《/div》
《div class=“rightDoor“》《/div》
2然后写好大门的css，
div{
margin:0;
padding:0;
}
.door{
width:450px;
height:450px;
position:relative;
background:#a1a1a1;
}
.door .leftDoor,.door .rightDoor{
position:absolute;
width:224px;
height:400px;
top:57px;
top:50px;
background:#d1d1d1;
}
.door .leftDoor{
left:0;
border-right:1px solid #999;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
}
.door .rightDoor{
right:0;
border-left:1px solid #999;
transform-origin: 100% 40%;
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg);
}
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(70deg);
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}
100% {
-o-transform:perspective(600px) rotateY(-70deg);
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(-70deg);
}
}
5这里的动画主要用到的是rotate和perspective
6如果想要动画点击后才开门，可以加入一个按钮，然后js控制

CSS3帧动画

animation动画除了可以实现补间动画外，还可以完成逐帧动画。

在animation的属性中，有个属性 animation-timing-function 一共具有如下这些值

CSS

贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。

但是逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。

比如像下面这样的图，就只能通过逐帧动画来实现运动效果↓

这几个属性值就是用来处理逐帧动画的：

CSS

steps(number,position) ，有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position这个比较难理解，有两个值：end和start。end是默认值。

先看一个效果。

两个小球，从0px运动到400px，分为了4个动画步骤，有5个关键帧。第一个是start模式，第二个是end模式。

发现start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。

end模式有点傻，时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完第四个关键帧，没有完成全部路程就over了。

所以start和end的名字和它所表示的含义刚好相反。

比如执行次数或者填充模式。

为上面的小球加上infinite，可以看出start模式第二次开始的运动都是从第二个关键帧开始的。

加上forwards模式则变得不一样了，forwards是向前的单词意思，但是表示的则是保留动画最后的运动状态，意思和功能也是相反的。

第二个end模式的小球终于有机会走完全程了。
所以，当为end模式设置了forwards的时候要小心，因为它其实多走了一步。

1、这头熊的原始素材一共有8个步骤。

所以使用 steps(8,end) 是最好的方式，因为如果使用 steps(8,start) ，则第一帧不能执行，最后一帧会闪白，图片消失。

因为要一直运动，所以需要加上infinite，当执行完最后一张图的时候，再返回到第一张图，形成一个连贯的完步。

通过背景图片的 background-position 的改变，形成熊的运动。

CSS

可以打开codepen器，把运动时间设置更大一点，可以看到慢动作，一帧一帧是如何显示的。
2、这个logo一共有24张图片

但是logo只运动一次，并且停在结束状态，根据end模式的特征，如果加上forwards的话，会多运动一步。

所以，这里是 steps(23,end) ，为什么是23步，而不是24步，因为forwards模式对它的影响。要想最后一步还要看到图片，那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px，每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。

CSS

通过上面的案例可以看出，对象的运动效果由逐帧绘制的图片的间距所影响。间距一样，则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。

但是利用 step-end 或者 step-start 却是可以的。

3、 step-end 的特别用处

其实 step-end 等价于 steps(1,end) ， step-start 等价于 steps(1,start) 。

只有一个步骤的逐帧动画，却可以利用好时间的改变和距离的改变做出速度不同的效果来。

熊从左边快速奔跑出来，一共跑了六步，一步比一步速度放慢。然后在原地踏步。

首先这是一个逐帧动画，但是要实现不同的速度，又没有办法改变原来素材图片与图片之间的距离，所以要使用另外的办法。

第一个完步时间间隔小，left的值间隔大，相当于速度快。背景图片往左移动一张，left的值往右改变一次，熊实现往前奔跑。

CSS

第二个完步的时间间隔稍微大点，left的间隔小了一点，速度变慢了一些。依次类推，速度逐渐放缓。第二个完步又从第一帧开始。

CSS

所以说利用step-end还是可以做出速度不一样的逐帧动画的。
在线制作雪碧图： https://www.toptal.com/developers/css/sprite-generator

小程序如何使用css3动画

1、利用样式实现小程序动画(用法和css用法相识)
wxml 文件

《image class=“aniamtion“ src=“../../images/page4.jfif“ style=“width:200rpx;height:200rpx; position: relative;“》《/image》

wxss文件

.aniamtion {

animation: mymove 5s infinite;

/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

/* left: 0px; */

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */

transform: rotate3d(100,200,300,0deg);

}

to {

/* left: 200px; */

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */

transform: rotate3d(200,300,400,360deg);

}

2、用小程序的API来实现动画
用wx.createAnimation(object) 来创建一个动画 –》返回一个animation对象
创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:’linear’,

delay:100,

transformOrigin:“left top 0“

})

调用实例的方法来描述动画。
Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

animation:this.animation.export()

})

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

animation:this.animation.export()

})

完整的wxml

《view class=“container“》

《view animation=“{{animation}}“ class=“view“》

将做动画的块

《/view》

《button type=“default“ size=“mini“ bindtap=“rotate“》

旋转

《/button》

完整的wxjs

Page({

data: {

animation:’’

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:’linear’,

delay:100,

transformOrigin:“left top 0“

})

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）

《text》pages/index7/index7.wxml《/text》

《view id=“container“ style=“height: 100px; width: 100px; background-color: blue;“》

container

《/view》

《view class=“block“ style=“height: 100px; width: 100px;background-color: #ccc;“》

block

《/view》

用选择器选择相应的组件进行相应的动画
进行关键帧的处理

onLoad: function () {

this.animate(’#container’, [

{ opacity: 1.0, rotate: 0, backgroundColor: ’#FF0000’ },

{ opacity: 0.5, rotate: 45, backgroundColor: ’#00FF00’ },

{ opacity: 1.0, rotate: 90, backgroundColor: ’#FF0000’ },

], 5000)

this.animate(’.block’, [

{ scale: , rotate: 0, ease: ’ease-out’ },

{ scale: , rotate: 45, ease: ’ease-in’},

{ scale: , rotate: 90 },

], 5000)

}

4、用第三方的库 animation.css

需要做的有

从https://daneden.github.io/animate.css/下载css动画文件

把 .css 文件改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

《view class=“swing“ style=“height: 100px; width: 100px;background-color: #ccc;“》

block

《/view》

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite;

}

CSS3动画

transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。
好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。

MDN animation
深入浅出CSS动画

MDN animate()

监听 CSS animation 动画的事件:

这些监听事件对 animate() 是无效的。

页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告

原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。

逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。

兼容性：如果不支持 animate() ，那么我们可以动态创建《style》 + @keyframes ，插入《head》 , 但也要记得移除。

用Css3 实现React 动画的三种方法

中级：
Css3中的帧动画

这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子，首先我们需要安装react-transition-group，输入

组件中引入CSSTransition模块：

一旦动画入场，插件将会自动的在包裹住的标签上添加很多css样式，默认class名是boss-text，所以我们需要给CSSTransition标签加上classNames=’boss-text’，然后去css文件进行配置：

如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup

css3动画效果，如何设置呢

要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。