一个可用于React、Vue、纯HTML和CSS的可组合CSS动画工具包— AnimXYZ

开发 开发工具
AnimXYZ 是一个 CSS 动画库,用于为你的网站创建自定义 CSS 动画。是什么让 AnimXYZ 如此之好,它是可组合的,这意味着你可以组合和混合不同的动画来创建自己的高度可定制的 CSS 动画,而无需编写一个单一的关键帧。

 [[375287]]

AnimXYZ 是一个 CSS 动画库,用于为你的网站创建自定义 CSS 动画。是什么让 AnimXYZ 如此之好,它是可组合的,这意味着你可以组合和混合不同的动画来创建自己的高度可定制的 CSS 动画,而无需编写一个单一的关键帧。

制作动画就像用文字描述一样简单

例如,你可以通过编写 xyz = "fade big up" 来创建动画,该动画可以使用 AnimXYZ 淡入淡出,按比例放大和向上移动。

AnimXYZ 还有一个小软件包,基本功能是 2.68kb ,如果包含方便的实用程序,则是 11.4kb 。

[[375288]]

可定制性

AnimXYZ 是由 CSS 变量驱动的,AnimXYZ 允许你覆盖任何一个 CSS 变量来进一步定制/控制动画和几乎无限数量的自定义动画。

你可以通过在你的 CSS 中选择带有 xyz 属性的元素来编辑一个 AnimXYZ CSS 变量,并改变一个已定义的 AnimXYZ 变量的值,就像这样:

  1. .my-class-name { 
  2.   --xyz-opacity: 0.5

所有 AnimXYZ 变量的开头都带有 xyz 前缀,然后通常后面跟随 CSS 属性名称。

嵌套动画

AnimXYZ 支持嵌套动画,这允许我们在我们的动画元素(带有 xyz 属性的元素)中包裹多个元素来制作动画。嵌套动画看起来像这样:

  1. <div class="my-class-name" xyz="fade"
  2.   <div class="xyz-in">Hello</div> 
  3.   <div class="xyz-in">Hello</div> 
  4.   <div class="xyz-in">Hello</div> 
  5. </div> 

这将使所有包裹着 .my-name-element 的元素同时淡入。

[[375289]]

错位动画

如果我们不想让嵌套动画同时发生,我们很幸运,因为 AnimXYZ 也支持错位动画,这意味着如果我们有一个嵌套动画,我们可以让每个元素一个接一个地到达/离开。我们可以通过在 xyz 属性中添加 stagger 来实现这一点,这将使动画从左到右错开,我们也可以通过使用 stagger-rev 来反转错开,所以现在它将从右到左错开。

[[375290]]

 

责任编辑:张燕妮 来源: 做工程不做码农
相关推荐

2019-04-29 08:10:46

数据中心基础设施IT

2024-03-13 08:21:53

冒泡排序动画

2015-11-11 15:22:27

h5工具

2017-04-27 14:05:59

CSS动画前端

2022-05-31 18:53:04

微服务可组合架构架构

2021-01-15 11:20:33

可组合分解基础设施基础设施服务器

2023-04-17 09:08:27

CSS计时器

2022-03-01 10:48:19

Gartner可组合的业务中国企业

2017-05-11 15:20:52

CSS3动画前端

2022-08-29 17:39:53

应用开发css动画

2023-11-01 08:33:45

CSS动画效果

2022-12-22 10:43:30

数字化转型IT领导者

2017-09-07 11:05:27

PikeOpenStack基础设施

2021-07-19 06:05:03

PCIe可组合基础设施存储

2022-09-12 08:31:41

CSS3伪类URI

2022-11-14 08:32:51

CSS组件Box

2014-10-08 09:38:54

HTML5

2021-11-09 07:26:14

CssMaterialUI React

2015-04-24 10:05:15

HTML+CSS阿童木头像

2016-11-01 09:46:04

点赞
收藏

51CTO技术栈公众号