CSS 动画

CSS 演示文稿

来源:在线程序

有许多程序可以在其中编辑、创建蒙太奇甚至创建 动画,每次都有很多软件加入这种类型的交互项目。 在这篇文章中,我们不仅要向您介绍动画世界,还要向您介绍一位新朋友。

众所周知,计算世界充满了用于开发目前共存的网页或在线媒体的命令和有用工具。 留在我们身边,在这个新教程中发现另一种提高计算和交互水平的方法。

什么是动画?

动画的世界

来源:所有玩家

我们希望您完全进入教程,但为此,有必要进入动画世界或平面设计方面的世界, 交互设计。 

动画也是视听世界的一部分,事实上,如果或因为在其中引入了音频和运动图像,它们将一文不值。 因此,当我们谈到“动画”时,我们指的是众所周知的“卡通”。

如上所述,动画源于赋予事物运动的能力,在这种情况下是卡通。 但是所有这些运动是如何实现的呢?毫无疑问,它们源于我们所说的, 图画或照片序列 通过连续排序,一个接一个,他们设法在我们眼前产生一个可信的运动,这让他们自己进入了视觉错觉的游戏。

以前,最初的动画是在纸上设计的,每张纸中,动画人物都是一步一步画出来的,到了纸的尽头,就一个一个地快速通过,达到在纸上运动的效果。画画。

动画类型

有不同类型的动画:

卡通或传统动画

这种风格包括逐帧给主角移动。 一开始,视听手段不够,都是通过对每一帧(包括动画的背景、舞台或背景)的绘图和绘画来进行的,后来被拍摄成我们所知道的电影磁带。

停止运动

定格动画是一种与卡通无关的动画技术。 此外,它的主要目标是模拟现实中完全静止的物体的运动,它分为两个阶段:粘土或粘土运动的动画和刚性物体的动画。

像素化

像素化是一种来自定格动画的技术,包括处理既不是玩偶也不是模型的对象,而是常见的对象或人。 物体被多次拍摄,并随着每一帧轻微移动。

旋转镜检查

它包括直接绘制另一幅图画,例如在另一幅图画或真实人物上绘制一幅图画。 它被认为是动作捕捉的先驱,即用于在电影世界中重建数字角色的动作捕捉。

剪切动画或剪切动画

这是一种由切割图形组成的技术,这些图形可以在纸上或照片中表示。 角色的身体是基于剪切图构建的,而运动和动画则是通过替换所述剪切图而产生的。

3d 动画

3D 动画源自一个编辑器程序,它允许执行模拟和动画。 在这两种变体中,良好的照明、相机运动和特殊效果相互联系。

目前还有其他技术,例如: 玻璃上的绘画、沙子的动画、古贾斯的屏幕和赛璐珞上的绘画。 

什么是 CSS?

一个程序的css界面

来源:Rosario Session Studio 网页设计

现在您对动画世界有了更多的了解,现在是我们向您介绍 CSS 首字母缩略词世界的时候了。

看台 的CSS,请参阅“级联样式表”。 它是由一种在设计领域和网页呈现中使用的语言形成的,更好的是,它们是一系列工具和命令,负责呈现我们第一次看到的网页它已经被创建。 与工具一起使用 HTML (从页面的基本内容组织)。

它的名称由它包含的叶子数量决定,其中之一从其他叶子继承属性或特征。 也就是说,您可以使用一个简单的博客模板,但是当您想要自定义站点的外观时,您需要实施 CSS,它与良好的 CMS 一起将帮助您增强内容的覆盖范围。

CSS 有什么用?

使用 CSS,您可以组织您的页面,也就是说,您可以告诉您的网页您希望如何定位所有信息,以便查看器易于处理并同时有用。 此处输入作为网页样式或设计一部分的某些元素的所有命令,例如, 字体、颜色、大小等。 

通常,为了让您更好地了解该工具的用途,数字营销专家是第一个了解这一点的人,因为他们是处理这些工具的人。

在 CSS 中制作动画

好吧,现在您对动画和 CSS 的世界有了一些了解。 是时候开始教程了。

CSS 动画允许您为一种 CSS 样式和另一种 CSS 样式之间的过渡设置动画。 这些动画由两部分组成: 风格 它描述了 CSS 动画和一组 镜框 表示它的初始和最终状态,以及其中可能的中间点。

这些动画中的每一个都有一系列优点:

  • 对于简单的动画,它的使用非常容易,即使您不了解 Javascript 也可以做到。
  • 即使在低功耗计算机上,动画也能正确显示。
  • 由浏览器控制,它可以优化其性能和效率,从而降低频率并以不可见的方式执行选项卡。

动画设置

要开始动画,首先我们必须配置它。 为此,我们将前往该物业 动画 以及它的子属性。 这个工具将允许我们配置动画的节奏和持续时间,甚至不配置它的序列。

子属性是:

动画 - 延迟

从元素加载到动画序列开始之间的延迟时间。

动画 - 方向

指示动画是在序列结束时倒回到起始帧,还是在结束时从头开始。

动画 - 持续时间

表示动画完成其循环所需的时间(持续时间)

动画 - 迭代 - 计数

重复的次数。 我们可以指出 无穷 无限期地重复动画。

动画 - 名称

它用于指定描述动画每一帧的名称。

动画 - 播放 - 状态

允许您能够暂停和恢复动画序列。

动画-计时-功能

它指示动画的节奏,即动画帧的显示方式,为此建立了加速度曲线。

动画 - 填充 - 模式

指定动画结束后属性会有什么值。

用帧设置序列

一旦我们配置了时间、命名法等。 是时候为我们的动画提供外观或感觉了。

为此,我们将建立两个新框架并使用规则 @关键帧. 有了这个,每一帧都描述了在动画序列中如何找到每个元素。

表明 时间和节奏, 框架使用 百分比 从和到多亏了这一点,我们可以指示何时开始以 0% 发生,何时以 100% 结束。

帧和文本动画

要添加更多帧并使用文本为其设置动画,您需要应用更大尺寸的标题字体,以便标题在移动一段时间后增加,然后再减小到其原始大小。 为此,我们将建立以下代码:

75% 字体 - 大小:300%; 边距 - 左:25%; 宽度:150%;

使用此代码,我们建议浏览器在 75% 的序列中,标题的左边距为 25%,大小为 200%,宽度为 150%。

动画重复

要使动画重复,必须使用以下属性 动画 - 迭代 - 计数 并且我们必须指明我们希望它重复多少次。 我们也可以使用 无穷 以便它总是重复。

结论

如您所见,在 CSS 中您可以创建动画项目,您可以按照我们提供的步骤输入它。 如果您继续询问并告知自己,您会发现我们有很多选择。

你已经敢了吗?


本文内容遵循我们的原则 编辑伦理。 要报告错误,请单击 信息.

成为第一个发表评论

发表您的评论

您的电子邮件地址将不会被发表。

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。