14 COOL CSS动画工具用于WordPress

现代Web冲浪者希望抓住她的眼睛.但是，在网络上有这么多酷派和分心，捕捉他们的注意力变得更加艰难.什么是Web开发人员?！

动画可以帮助.但不仅仅是任何旧的随机动画华而不实的事情.那些很烦人.我在谈论动画是有效的.使您的网站流行的动画在不讨厌您的读者并减慢网站的情况下.我谈论用CSS进行动画.

CSS动画允许从一个CSS样式转换到另一个CSS样式.它们使按钮旋转并旋转.它们可以切换按钮或交换机的状态.他们可以显示一个刀尖.他们以平稳而有趣的方式使您的页面转换(或者如果这是您的味道，或者可能是一种狂野而疯狂的方式).它可以在屏幕上移动一个对象.CSS动画看起来很棒而现代，它们很容易实现.

继续读取，或使用以下链接跳转:

• 为什么css而不是javascript?
• 用手创建CSS动画
  

  • 动画
  • 转换
  • 动画
  • 手工编码的想法

  
  
• 使用工具创建CSS动画
• 使用插件创建CSS动画
• 包装

为什么CSS而不是JavaScript?

为什么可以使用CSS，当您可以使用JavaScript或其他几个脚本来创建动画?

这是一些好理由:

1. 它们很容易.你不必知道脚本以创建它们.
2. 它们即使在适度的系统负载下也是光滑的.当JavaScript不会时，它们会顺利运行.
3. 浏览器将控制动画序列.这意味着当前不可见的浏览器选项卡将减少运行的动画数量，大大加速性能.

基本上，用CSS动画是在屏幕上移动某些东西的最简单方法，并将一些动画闪光添加到您的网站.

使用前端创建令人惊叹的CSS动画，易于使用拖放主题平台.

如何手动创建CSS动画

有几种方法可以创建CSS动画.一种方法是使用@keyframes api手用手编写它们.

注意:关键帧是从手绘动画日的返回的旧术语.动画函数会创建名为关键帧的操作帧.关键帧是行动的主要帧.然后，动画师将绘制在关键框架之间进行的单个帧，填充空白.

动画

就像旧的漫画一样，动画是用关键帧定义的.使用CSS动画，并与手工绘制的旧漫画不同，我们告诉浏览器CSS属性需要在给定点，浏览器将填补空白.沃尔特本来会爱这个！

CSS密钥帧是描述动画的值列​​表.这是一个在CSS文件中写入的块.任何带有卷曲括号的东西都是@KeyFrames块的一部分.从和到等关键字定义动画将是什么.示例是将字符从屏幕上的当前位置移动到远离该位置的一定数量的像素.您可以使用命令 translate 移动对象.这利用了硬件加速，它会降低覆盖现有风格的可能性.

让我们看几个例子.

转换

转换允许您将对象从点A移动到B点B，而没有任何点.

这是 Google开发人员:

装载gist 9b179c7d643ac14ca229fb28f1a3b269

它使用的CSS转换设置为需要500ms，并将在x和y轴上移动元素100px.

CSS动画通常是供应商前缀.Prefix -Webkit - 用于浏览器，如Chrome，Safari，Safari Mobile，Android和Opera.Firefox和Internet Explorer不带前缀.您可以使用众多工具和指南可用于创建专门在这些浏览器上运行的版本.

可以使用javescript打开或关闭动画:

装载gist 40553fa383049e0e429a7046b2d3b2

结束动画的代码将如下所示:

加载主旨cde0f1fd82377e125db4ecd3a6cf427d

动画

CSS动画通过利用多个关键帧，持续时间和迭代，可以让您更好地控制转换.

Google的此代码将在没有任何用户交互的情况下为框设置动画，具有无限重复，并同时更改多个属性:

加载主旨c8622a1acb3023d21cf11a113ea7568f

您将动画与目标元素分开定义.动画名称属性用于选择所需的动画.这比使用JavaScript做同样的工作要简单得多.

可以使用javascript来管理状态，在目标元素上设置类，让浏览器处理动画.这创建了一种简单而平滑的方法，可以在您的网站上创建和控制动画而无需执行一吨代码，并且由于CSS为Light，它不会过度税收.

手工编码的思考

css @keyframe动画是开发人员工具箱的一个很好的补充.它们比JavaScript动画更简单，它们可以比CSS转换执行更详细的动画.如果要使用JS执行一些更多的税务功能，您仍然可以使用JavaScript.

仍然，使用@keyframe api的动画可以得到复杂，他们可能需要一些时间才能让它致力于您想要的方式.您可以使用您想要的关键帧，但它变得耗时.编码CSS动画可以变得非常高级，需要深入了解CSS，甚至一些HTML和JavaScript的知识.

使用工具创建CSS动画

手动编码可能是困难且耗时的.为此提供帮助，有一些好工具.这些工具可以帮助您使用代码创建复杂的动作和动画.您可以指定所需的效果，时序和角度，并且它们为您提供了您可以粘贴到您网站的代码.您甚至可以根据您的方式修改它.

让我们快速看一些好工具.

• styrie

  styrie是Jeremy Kahn的免费工具，允许您轻松设置关键帧，动作，CSS和HTML，并创建自己的CSS动画，而无需手动编写代码.这是一个强大且易于使用的开源图形Web应用程序.

  利用@Keyframs可以在动画中具有任何数量的关键帧来构建复杂的运动路径.这被称为易于弯曲的曲线.您可以创建任何您想要的曲线.手动这样做会花几个小时，但是用款式只需要几分钟时间.

  使用很简单.您设置了关键帧的定时并开始绘制要采取对象的路径.您可以拥有尽可能多的关键帧和路径.完成后，您可以保存它或选择导出，选择CSS，并复制代码.

  我在几秒钟内创建了一条路径.一个球以我为每个关键帧设置的速度跟踪路径.这意味着路径中的每一线都可以具有不同的速度.它为我生成了一个非常大的代码.这段代码可以用手创建，但真的，你为什么要这样做?对自由工具不错.很容易查看为什么一个像这样的工具有助于复杂的动画和路径.

  此外，如果您保存了它，您可以返回并修改代码.如果要对其进行修改，它会给您提供，那么您不必从头开始启动，因为复杂的代码已为您生成.作者提供了一个很好的教程让您通过创建一些花哨的角度.

• 动画.css

  这个是来自Daniel Eden的应用程序，可以自由使用.它有75个动画可供选择.您可以从页面或Github下载此应用程序.您可以在页面本身上看到动画.当您选择动画或点击按钮时，徽标将执行动画，以便您知道您得到的是什么.效果包括反弹，闪光，脉冲，橡皮筋，摇晃，摆动，潮汐，摆动，果冻，旋转，翻转，滑动，变焦，铰链等.

  使用它，将样式表放在文档的头文件中，添加类动画到要动画的元素，并从75个选择中添加所需的类.您还可以包括无限循环的类无限.

  这是GitHub页面的一个例子:

  </pre>
  <h1 class="animated infinite bounce">Example</h1>
  <pre>
  

  这就是让这个工作所需的一切.通过将其与jQuery组合或添加您自己的CSS规则，您可以使用它更多.

• arimatable

  这个包含一些包含概述，颜色的最有趣的效果，宽度，不透明度，高度，阴影，边框，字体大小，半径，缩进，间距，填充，更多.有39个效果可供选择.要使用它们只需包含样式表，请为要动画的元素添加一个类，并指定要使用的动画.

• effeckt.css

  这个do模态，位置模块，按钮，列表项，滚动项，在屏幕导航，标题，工具提示，表单元素和标签上过渡，其中包含每个效果的所有效果.这仍然是一项正在进行的工作.与其他库一样，要使用它们包含样式表，将类添加到要动画的元素，并指定要使用的动画.

• magic.css

  这个确实打开，摆动，消失，扭曲，透视，旋转，幻灯片等等.它有65个效果.这是一个包含样式表的另一个库，将类添加到要动画的元素，并指定要使用的动画.

• morf.js

  这个一个具有webkit的本机和自定义函数.它让您尝试它们，为您提供可以复制和粘贴到代码中的CSS.简单，完全漂亮.

• 页面转换

  这个看起来很令人惊叹的平滑过渡.它们与其他库一起使用，在其中包含样式表，将类添加到要动画的元素，并指定要使用的动画.但如果你会赦免双关语，这个真的有一些风格.

• ceaser

  这个免费的在线工具将为您选择的设置提供代码片段.它会从左到右移动一个对象，调整其宽度，高度和不透明度.您可以调整持续时间，并在几种不同的对齐类型之间进行选择或创建自己的.在我看来，值得退房.

使用插件创建CSS动画

有几个好插件可用，可以使用页面转换或按钮动画等特定任务.这些不要求您处理任何代码.您仍然可以指定时间，持续时间等.

这是一个快速看几个我喜欢的.

• 动画它！

  此免费插件提供了一种简单的方法，可以将CSS动画添加到页面，帖子和小部件.它有50个入口，退出和引人注目的动画.它可以在滚动上设置与每个动画块的不同滚动偏移量的动画.它还可以在悬停和点击中设置动画.它还具有特殊的延迟类，用于在页面和帖子中创建动画序列.如果用户想要，可以在移动设备上禁用动画.用户甚至可以将动画应用于小部件.

  我留下了深刻的留下了这个插件的使用.它在您的视觉编辑器上添加了一个按钮，您可以在其中制作所有选择.它会自动将内容置于包装纸中.包装纸内的任何东西-文本，图形等-得到动画.您可以轻松对代码进行更改，因为它标记为良好.插件很轻，所以它不会在您的服务器上放置一个压力，并且有足够的选择可以使动画新鲜和令人兴奋.

• WP视差内容滑块

  此免费插件自动添加您想要任何地方的上一篇文章的内容滑块.您可以选择要显示的内容类型，幻灯片的数量，设置自动播放模式，幻灯片之间的时序，排序顺序等.您还可以选择黄色波浪，黑暗，复古红色和银之间的图形主题.您还可以使用它来显示HTML内容.

  只有六个设置，所以它很容易使用，并且有两种方法可以使用它.您可以使用短码将滑块放入页面或帖子中，或者您可以将附带的代码粘贴到您希望滑块以主题中显示的位置.

• 所有按钮:CSS3动画按钮生成器用于WordPress

  此免费插件允许您从Visual Editor创建CSS3动画按钮.您可以自定义对齐，大小，颜色，图标，动画，然后将它们放在使用短路的页面和帖子中.它在Visual Editor上放置一个按钮，以便您可以在您的内容中打开按钮.

  Visual Editor中的按钮将打开一个窗口，您可以在其中创建具有动画，文本和URL的全新按钮.您只需制作您的选择，然后单击以创建按钮.然后它将短代码放在页面或帖子中.如果要进行更改，则可以修改内容中的代码.

• 页面转换

  此免费插件使用CSS3动画在页面之间提供平滑的转换，使您的网站更加现代化.有很多很酷的效果，包括淡入淡出(以中心，向上，向下，左，右侧，右)，旋转，翻转和变焦.您可以调整方向和时序.

  它使用简单的设置屏幕，您可以在其中选择动画，持续时间和颜色的类型.如果您愿意，您可以显示"加载"这个词.如果您确实显示了，您可以选择要为字体选择的任何颜色.如果您想要将"无动画"添加到该链接的"A"标记，则您也可以排除页面.

  就像它的名字表明，它只将过渡从一个页面动画到另一个页面，但它的设置很简单，看起来很棒，并且像魅力一样工作.看它也很有趣.

• 页面动画和转换

  这是另一个免费插件页面转换的CSS3动画是.它将在页面和页面out上进行动画，您可以为每个页面设置持续时间.它将淡入褪色(以居中，向上，向下，向左，右)，旋转，翻转(x和y)，并缩放到进出.

  设置非常简单.你只是制作了一些选择，你已经完成了.有足够的动画让你的网站没有很多工作的现代感觉.

• 动画CSS3效果WordPress插件

  这一个声称是市场上最完整的CSS动画插件.它有超过60个动画效果，包括淡入淡出，幻灯片，旋转，翻转，弹跳，橡皮筋，摆动，摇动，摇摆，潮汐，闪光，铰链等.它有六种不同的设置，可控制持续时间，延迟和速度.它具有包含负载，单击和鼠标的事件触发器.还有多种触发类型，因此触发器可以是诸如图像，按钮，文本或链接等内容.

  它将按钮添加到Visual Editor中，以便您可以将其添加到任何页面或帖子上的内容中.您甚至可以预览动画，以便您知道它是否是您正在寻找的.

  这是一个高级插件.您或一名客户端的常规许可费用为15美元，在最终用户未收取的单一最终产品中使用.延长许可证为75美元，供您或一个客户端，在最终用户 CAN 的单一最终产品中.

包装

CSS动画使网站闪闪发光，它们是易于实现您的手动编码，使用工具为您创建代码，或使用插件.

标签:

• 动画
• css
• wordpress