css3动画（svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢）

本文目录

• svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢
• CSS3帧动画
• animate.css和自己写的css3动画有区别吗
• 小程序如何使用css3动画
• CSS3 的动画的意义何在
• css3怎么让动画匀速变换 linear
• CSS3可以在网页中做动画吗

svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢

搜了几篇老外的文章，提到 svg 的 forginObject 内的 HTML 元素，当应用 CSS3 动画时，动画的 transform-origin 是基于最外层 body 定位的，貌似无解。

个人建议使用 svg 的 SMIL 动画来实现波纹特效，你大屏展示用的话，兼容性啥的应该不是主要问题

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

animate.css和自己写的css3动画有区别吗

animate.css是别人写好的动画，和自己写没什么区别，自己也可以写。例如我想加一个向右移动200px，然后回到原点，然后一直循环的动画。可是animate.css里面没有，我就可以自己加一个@keyframes进去:

@keyframes LeftToRight{
    0% {
        left: 0;
    }
    50% {
        left: 200px;
    }
    100% {
        left: 0;
    }
}

最后调用的时候：

《div class=“zsz“》zsz《/div》

.zsz {
    position: relative;
    left: 0;
    width: 50%;
    animation: 6s LeftToRight linear infinite;
}

小程序如何使用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》

《/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 的动画的意义何在

让你的页面动画在移动设备上运行更快。这是一个有趣的话题。这也是移动互联网前端工程师关心的问题。

我们都知道JavaScript效率低下的两个主要原因：操作DOM和使用页面动画。浏览器上的动画效果并不比客户端容易。通常情况下，我们会通过频繁的CSS操作来实现视觉动画效果。在DOM和CSS的频繁操作，浏览器将不停止执行重排和重绘，在浏览器的PC版的浏览器，因为可用的内存比较大，用户肉眼是动画网页制作的油漆和回流几乎看不见，所以工程师不用过多考虑性能问题的动画了。但在移动设备上可以有移动设备浏览器的不同分布（内置浏览器）内存不能PC浏览器的内存分配相当的版本，称iPhone Safari的内存只有10M，但一个外国工程师事实上，iPhone 3GS被分配到他旅行的记忆只有6m。

而Android是分配给浏览器的内存更是不确定的，无论是iPhone或Android或WindowPhone上或黑莓，没有官方的文件说，系统自带的浏览器占据了大部分的记忆，所以上述存储器中的数据是不确定的。目前，对CSS3的最佳支持Webkit的浏览器。在WebKit内核浏览器，苹果的Safari和谷歌的Chrome浏览器应该黑莓。

前端工程师知道CSS3提供了大量的新功能，包括二维、三维动画的特点，在这讨论的其他特点，我们讨论了目前的CSS3动画的意义。

使用CSS3动画：不占用js主线程；可以利用硬件加速；浏览器可以优化动画（不是在元素可见的时候，而不是动画，并减少对FPS的影响）。

css3怎么让动画匀速变换 linear

transition-timing-function。和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。

注意：transition是为页面元素设置某个需要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。

通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些，我们往往只有在遇到transition无法解决的问题时，才会转而使用animation。

CSS3可以在网页中做动画吗

可以的，可以用代码在网页中创建“
补间动画
”，听起来是不是非常神奇？其实并不难，你可以去百度“
秒秒学
”，里面Flash中的
HTML5
开发教程就会交互式的教你，怎么制作图形，并利用图形的
匀速运动
，在网页中制作出“补间动画”的神奇效果。
/table》