大家好，今天小编来为大家解答animate.css这个问题，animate官网中文版下载很多人还不知道，现在让我们一起来看看吧！
在网页设计中，动画效果是提升用户体验、增加视觉冲击力的关键元素。而animate.css作为一个流行的CSS动画库，已经成为了许多开发者们心中的“魔法棒”。本文将带你深入了解animate.css的神奇魅力，让你轻松掌握动画效果的运用。
一、什么是animate.css？
animate.css是一个开源的CSS动画库，提供了多种丰富的动画效果。它可以让你的网页元素实现淡入淡出、缩放、旋转、翻转等多种动画效果，让你的网页更加生动有趣。
二、animate.css的特点
1. 兼容性好：animate.css支持主流浏览器，包括Chrome、Firefox、Safari、Edge等。
2. 使用简单：只需添加对应的类名，就可以实现动画效果，无需编写复杂的JavaScript代码。
3. 丰富的动画效果：提供了多种动画效果，包括淡入淡出、缩放、旋转、翻转、抖动等。
4. 易于自定义：你可以通过修改CSS样式，对动画效果进行自定义。
三、animate.css的应用实例
以下是一些使用animate.css实现动画效果的实例：
1. 淡入淡出
“`html
Animation：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。可以设置多个关键贞。
Transition与Animation区别:
transition需要触发一个事件,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。
Transition:
transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：
.position{
left:100px;
top:100px;
}
.animate{
-webkit-transition:left0.5sease-out;
left:500px;
top:500px;
}
其中animate的transition的属性的意思说：当left属性发生变化的时候，执行动画效果(仅仅基于left的属性变化，其他的属性不会加入到动画变化里面去);
首先css为position。当cssList增加animate或者替换position为animate的时候，元素的属性变化，触发webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了animation属性的复杂程度。
同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。
Animation:
在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。
做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而csskeyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的keyframes的示例：
@keyframes'wobble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.animate{
left:100px;
-webkit-animation:wobble0.5sease-out;
-webkit-animation-fill-mode:backwards;
}
上面这个代码展示了一个keyframes'wobble'，其中0%代表在变化中不同时间点的属性值，可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与transition不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让cssanimation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量(比起flash来说算是大量了)基于css的animationtools，用来取代flash的动画部分。关于动画工具，可以参考Webstandards-basedAnimationTools.
另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。
animate cc工作区有哪几部分
1、位于顶部的应用程序栏包含工作区切换器、菜单（仅限 Windows）和其它应用程序控件。在 Mac操作系统中，对于某些产品，可以使用”窗口”菜单显示或隐藏应用程序栏；
2、工具面板包含用于创建和编辑图像、图稿、页面元素等的工具；
3、控制面板显示当前所选工具的选项。“控制”面板称为“属性检查器”，包含当前所选元素的属性；
4、文档窗口显示您正在处理的文件。可以将文档窗口设置为选项卡式窗口，并且在某些情况下可以进行分组和停放；
5、Animate中的时间轴，可以对面板进行编组、堆叠或停放；
6、应用程序帧将所有工作区元素分组到一个允许将应用程序作为单个单元的单个集成窗口中。当移动应用程序帧或其任何元素，或调整其大小时，它其中的所有元素则会彼此响应而没有重叠。切换应用程序或不小心在应用程序之外单击时，面板不会消失。
如果使用两个或更多应用程序，可以将各个应用程序并排放在屏幕或多台显示器上。
扩展资料：
常规动画工作流程，要构建 Animate CC应用程序，通常需要执行下列基本流程：
1.计划应用程序
确定应用程序要执行哪些基本任务；
2.添加媒体元素
创建并导入媒体元素，如图像、视频、声音和文本等；
3.排列元素
在舞台上和时间轴中排列这些媒体元素，以定义它们在应用程序中显示的时间和显示方式；
4.应用特殊效果
根据需要应用图形滤镜（如模糊、发光和斜角）、混合和其他特殊效果；
5、使用 ActionScript控制行为
编写 ActionScript®代码以控制媒体元素的行为方式，包括这些元素对用户交互的响应方式；
6、测试并发布应用程序
测试 FLA文件（“控制”>“测试影片”）以验证应用程序是否按预期工作，查找并纠正所遇到的错误。
参考资料：
Adobe官网-Animate工作流程和工作区
博客园个人主题动画是用css写的吗
在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。
从广义上来讲，css3动画可以分为两种。
过渡动画
第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。
要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有
transition-property：规定对哪个属性进行过渡
transition-duration：定义过渡的时间，默认是0
transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease
transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0
为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition属性上：
如果是使属性的默认值，则可以省略：
相当于：
如果想要同时过渡多个属性，可以用逗号隔开，如：
使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。
这样，当我们把鼠标移动到div上的时候，div的状态发生了变化，就能看到宽度从100到400，高度从100到400，背景颜色从黑到红的，过渡时间为3秒的过渡效果了。
除了使用hover等系统提供的伪类外，我们也可以随意的定义自己的类，然后想要过渡时就通过js把类加到元素上面：
关键帧动画
第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
关键帧动画的定义方式也比较特殊，它使用了一个关键字@keyframes来定义动画。具体格式为：
@keyframes动画名称{
时间点{元素状态}
时间点{元素状态}
…
}
例如：
这段代码定义了一个名为demo,且有5个关键帧的动画。0%，10%等这些表示的是时间点，是相对于整个动画的持续时间来说的，时间点之后的花括号里则是元素的状态属性集合，描述了这个元素在这个时间点的状态，动画发生时，就是从第一个状态到第二个状态进行过渡，然后从第二个状态到第三个状态进行过渡，直到最后一个状态。一般来说，0%和100%这两个关键帧是必须要定义的。
关键帧的书写方式很灵活，一行可以写多个关键帧。
甚至它们之间的空格也是可以不要的。
现在我们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就行了。
把动画绑定到元素上，我们可以使用animation属性。animation属性有以下这些：
像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state属性不能简写到animation中。
只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。
——————————————————————————————————————–
注意，为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀
animate.css的使用
animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：
首先在head中引入下载的animate.css文件
然后你想要哪个元素进行动画，就给那个元素添加上animated类以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。
假设使用jquery，要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake，所以代码是这样的：
这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。
至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。
注意这些属性还要记得加上各浏览器的前缀。
总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！
