注:原文有较大改动
使用
,
- keyframes
属性,例如
- animation
,
- timing
,
- delay
,
- play state
,
- animation-count
,
- iteration count
,
- direction
以及
- fill mode
等等
- will-change
创造动画魔法
作为设计者、开发人员,除去精简的用户界面,更好的页面加载速度外,我们发现通过给界面添加动画效果,可以增加用户与网站的互动率,能够更好的吸引用户使用我们的产品。CSS3 相对于原先的基于 Javascript 操作 Dom 实现动画的方式而已,CSS 如今拥有更好的兼容性。所以本文就介绍 CSS 动画的一些基本知识。
keyframes
通过逐渐改变对象的运动状态的方式,我们可以将动画应用到到页面上的任何对象上。然而利用
特性,我们便可以控制动画对象每一阶段的状态。
- keyframes
- @keyframes pulse {
- 0% {
- transform: scale3d(1, 1, 1);
- }
- 50%{
- transform: scale3d(1.1, 1.1, 1.1);
- }
- 100% {
- transform: scale3d(1, 1, 1);
- }
- }
- button {
- animation-duration: 1s;
- animation-name: pulse;
- }
在以上示例中,我们给一个 Button 添加了动画
,定义了持续时长 (duration) 为 1 秒。 如果我们调整了这个持续时长属性的值,则可以看到这个 Button 就会出现一个还不错的效果。如图:
- pulse
Demo 地址:
2. 动画时间(Animation Timing)
动画时间函数是用于决定我们希望动画在移动周期内要进行加速和减速效果的时间。所以,为了实现这个效果,我们需要定义动画将要移动的速度。这里有一些我们常见的动画时间属性的选项值,例如:
,
- initial
,
- inherit
,
- ease
,
- ease-in
, 还有
- ease-out
等等。
- linear
引用:
动画时间函数:左(ease)右(linear)
以上的选项是很直接的调整动画的方法。然而通过自定义贝塞尔曲线的值,可以满足你具体的动画时间需求。
关于如何使用贝塞尔曲线的方法我们可以通过查看 Mozilla 的
3. 动画延时 (Animation Delay)
动画延时常常应用于当我们需要对动画进行的延时操作的时候。即当某个动画被触发了,然后延时 1S 后开始执行。例如: 我们对 "Send FeedBack" 按钮添加了延时处理:
动画延时:左 (1 秒), 右 (2 秒)
4. 动画播放状态(Animation Play State)
动画播放状态常常用来控制动画是否需要暂停或者继续。
5. 动画的循环次数
循环次数指单位时间内,动画所重复执行的次数。
6. 动画方向(Animation Direction)
动画方向是用于指定动画对象的移动方向。例如是从尺寸 0% 到 100%,还是从 100% 到 %0,又或者是从 0% 到 100% 的大小,然后反转从 100% 到 0%。
7. 动画填充模式(Animation Fill Mode)
我们需要知道,当动画执行结束后,在动画执行期间给对象元素所添加的样式并不是永久的。这个样式仅仅是在动画期间被应用然后即被移除。关于动画应用的模式,我们可以使用以下属性值来表示:
Demo 地址:
8. 将要改变(Will-Change)
非常感谢
特性。可以通过
- Will-Change
属性,我们可以在动画执行前,提前通知浏览器上我们将要执行动画的对象元素。这就允许了我们可以一次性的对元素的多个属性进行动画操作。从而减少大部分动画执行期间潜在的性能损耗问题。
- Will-Change
- button {
- will - change: transform,
- opacity;
- }
下面的代码我声明了将会对所有元素的所有属性执行动画,即使是非动画区域。
- * ,
- *::before,
- *::after {
- will - change: all
- }
很显然,上面的这种使用方法会带来一些没有必要的系统资源的占用和性能损耗。
所以,我们应该尽可能在所需要的元素上使用 CSS 动画。更多关于
的特性的信息请看:
- Will-Change
4 个超级属性
在 keyframes 里,我们几乎可以使用任何的 CSS 属性。在如今的大部分浏览器中,你可以放心的使用
,
- position
,
- scale
,
- rotation
等等属性值。并且这 4 个属性可以给动画效果带来更高效,更好的性能表现。
- opacity
引用:
结语
以上列举的都是些实现 CSS 动画的基本属性,一旦了解了这些基础,从而更方便的开始进行动画创作。
关于很多你可能感兴趣的 CSS 动画应用和实例资源,可以查看 单元。
翻译地址:
来源: http://www.tuicool.com/articles/mQVFnaR