资讯专栏INFORMATION COLUMN

A Beginner’s Introduction to CSS Animation中文版

_DangJin / 1907人阅读

摘要:示例或者简写上面的代码将实现一个元素不透明度的过度,从到。接着,给添加默认的样式定义现在,我们来创建一个有五个阶段的应用动画定义完我们的动画,我们还需要将动画应用到上现在动画的状态是动画名称为。

现在越来越多的网站正在使用动画,无论是以GIF,SVG,WebGL,背景视频等形式。 当正确使用时,网络上的动画带来生机和交互性,为用户增添了额外的反馈和体验。

在本教程中,我将向您介绍CSS动画; 高性能的做事方式越来越受到browser support的欢迎。 下面的示例涵盖了基础知识:一个方形元素变化为圆形。

实现效果为https://codepen.io/mengmengpr...

高级选项

Envato市场上的设计师们一直在忙于创作一系列的CSS动画,从阴影到色带,滑块等。你可以将它们插入到你的网站中。
您还可以聘请Envato Studio的CSS专家,以帮助您为您的项目提供更丰富的定制。

@keyframes 和 Animation

CSS动画的主要组件是@keyframes,即创建动画的CSS规则。将@keyframes视为时间轴上的阶段。 在@keyframes中,您可以定义这些阶段,每个阶段都有不同的样式声明。

接下来,要使CSS动画工作,您需要将@keyframes绑定到一个选择器。这将逐步解析@keyframes声明中的所有代码,并根据阶段将初始样式更改为新样式。

@keyframes

接下来我们将设置动画阶段。@keyframes的属性有:

我们选择的名称(这里为tutsFade)。

阶段:0%-100%或者from(0%)-to(100%)。

css样式:我们即将应用到每个阶段的样式。

示例:

@keyframes tutsFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*---- 或者 ----*/
@keyframes tutsFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/*---- 简写 ----*/
@keyframes tutsFade {
    to {
        opacity: 0;
    }
}

上面的代码将实现一个元素不透明度的过度,从opacity: 1opacity: 0。上述每个方法都将获得相同的结果。

@Animation

动画属性用于在CSS选择器中调用@keyframes。
Animation可以有很多属性:

animation-name@keyframes的名字(这里是tutsFade)。

animation-duration:动画持续时长。

animation-timing-function:设置动画的速度(linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)。

animation-delay:动画开始前的延迟。

animation-iteration-count:动画循环的次数。

animation-direction:定义是否应该轮流反向播放动画。如果animation-direction值是"alternate",则动画会在奇数次数正常播放,而在偶数次数反向播放。

animation-fill-mode:指定当我们的动画完成时将哪些样式应用于元素。

示例:

.element {
    animation-name: tutsFade;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}
/*---- 简写 ----*/
.element {
    animation: tutsFade 4s 1s infinite linear alternate;
}
添加不同浏览器支持的前缀

我们需要使用浏览器特定的前缀来确保最佳的浏览器支持。 标准的前缀都有:

Chrome & Safari:-webkit-

Firefox:-moz-

Opera:-o-

IE:-ms-

上面的例子将变为:

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

为了本教程的可读性,接下来将不使用前缀,但最终版本会包含它们,我也鼓励您能在您的CSS代码中使用前缀。

要了解更多有关浏览器前缀的信息,可以查看http://css3please.com/。

多个动画

您可以使用逗号分隔符添加多个动画。假设我们要添加一个旋转到元素,需要声明额外的@keyframes,然后绑定到我们的元素:

.element {
    animation: tutsFade 4s 1s infinite linear alternate,
    tutsRotate 4s 1s infinite linear alternate;
}

@keyframes tutsFade {
    to {
        opacity: 0;
    }
}
@keyframes tutsRotate {
    to {
        transform: rotate(180deg);
    }
}
正方形到圆形的变换

接下来将创建一个简单的形状转换;使用上述原则来将一个正方形逐步变换为圆形。我们共有五个阶段,在每个阶段,都会定义元素的边框半径,旋转和不同的背景颜色。

基本元素

首先,我们创建一个html元素来进行动画。

接着,给div添加默认的样式:

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
}
定义Keyframes

现在,我们来创建一个有五个阶段的@keyframes

@keyframes square-to-circle {
    0%{
        border-radius: 0 0 0 0;
        background: coral;
        transform: rotate(0deg);
    }
    25%{
        border-radius: 50% 0 0 0;
        background: darksalmon;
        transform: rotate(45deg);
    }
    50%{
        border-radius: 50% 50% 0 0;
        background: indianred;
        transform: rotate(90deg);
    }
    75%{
        border-radius: 50% 50% 50% 0;
        background: lightcoral;
        transform: rotate(135deg);
    }
    100%{
        border-radius: 50%;
        background: darksalmon;
        transform: rotate(180deg);
    }
}
应用动画

定义完我们的square-to-circle动画,我们还需要将动画应用到div上:

div {
    width: 200px;
    height: 200px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite alternate;
}

现在动画的状态是:

动画名称为square-to-circle

动画时长为2s。

动画延迟为1s。

动画循环次数为infinite,因此会无限循环。

动画循环方向为alternate,它将从开始到结束,然后反向执行,然后再从开始到结束,一直循环。

使用animation-timing-function

我们可以添加到动画属性的最后一个值是动画定时功能。这将定义我们运动的速度,加速度和减速度。这个属性可以是一个非常详细的值(需要笨拙的手动计算),但是有很多免费的网站提供资源和动态定时功能的实时定制。

一个相关的工具是CSS Easing Animation Tool,可以用来计算animation-timing-funtion

通过在工具里的计算,使用animation-cubic-bezier,给我们的动画添加一个弹性特效。最终代码如下:

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}
最后一步

在现代浏览器中,我们的动画都能完美运行,但是Firefox在动画渲染方面较差,旋转过程中边缘会出现锯齿。我们可以通过添加outline样式完善:

outline: 1px solid transparent;

最近发现很多国外的优质文章,翻译是自己学习的过程也是分享的过程。喜欢的话,点个赞吧。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111896.html

相关文章

  • CSS 3动画介绍

    摘要:原文译文一个初学者对动画的介绍译者现在,越来越多的网站使用了动画,并且形式多样,如背景视频等等。先看看效果关于和动画的介绍动画主要的组件是,这个规则就是用来创建动画的。然后,为了使动画生效,需要将和一个选择器绑定。元素首先,定义动画的分隔。 原文:A Beginner’s Introduction to CSS Animation 译文:一个初学者对CSS动画的介绍 译者:dwqs...

    googollee 评论0 收藏0
  • 2017-06-28 前端日报

    摘要:前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报 精选 我是如何实现electron的在线升级热更新功能的? « 张鑫旭-鑫空间-鑫生活【翻译】React 表单: Refs 的运用【...

    QLQ 评论0 收藏0
  • 2017-09-05 前端日报

    摘要:前端日报精选理解构造函数与原型对象前端校招面试该考察什么听说你想写前端给程序员看的攻略上创造者,专访中文教学向再加行代码教你实现一个低配版的库代码篇我把最美的青春都献给了代码实战桌面计算器应用知乎专栏运算符规则与隐式类型转换详解 2017-09-05 前端日报 精选 理解构造函数与原型对象前端校招面试该考察什么?听说2017你想写前端?给程序员看的Javascript攻略 - Prot...

    cyrils 评论0 收藏0
  • 2017-06-23 前端日报

    摘要:前端日报精选大前端公共知识梳理这些知识你都掌握了吗以及在项目中的实践深入贯彻闭包思想,全面理解闭包形成过程重温核心概念和基本用法前端学习笔记自定义元素教程阮一峰的网络日志中文译回调是什么鬼掘金译年,一个开发者的好习惯知乎专 2017-06-23 前端日报 精选 大前端公共知识梳理:这些知识你都掌握了吗?Immutable.js 以及在 react+redux 项目中的实践深入贯彻闭包思...

    Vixb 评论0 收藏0

发表评论

0条评论

_DangJin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<