前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Css3 Animation 动画原则九

Css3 Animation 动画原则九

作者头像
grain先森
发布2019-04-09 17:57:40
4040
发布2019-04-09 17:57:40
举报
文章被收录于专栏:grain先森

时间节奏 (Timing)

时间节奏

动画的时间节奏是需要多久去完成,它可以被用来让看起来很重的对象做很重的动画,或者用在添加字符的动画中。

这在网页上可能只要简单调整 animation-durationtransition-duration 值。

这很容易让动画消耗更多时间,但调整时间节奏可以帮动画的内容和交互方式变得更出众。

HTML
代码语言:javascript
复制
<h1>Principle 9: Timing</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle nine">
    <div class="shape a"></div>
    <div class="shape b"></div>
</article>
CSS
代码语言:javascript
复制
.nine .shape.a {
  animation: nine 4s infinite cubic-bezier(.93,0,.67,1.21);
  left: calc(50% - 12em);
  transform-origin: 100% 6em;
}
.nine .shape.b {
  animation: nine 2s infinite cubic-bezier(1,-0.97,.23,1.84);
  left: calc(50% + 2em);
  transform-origin: 100% 100%;
}

@keyframes nine {
  0%, 10% {
    transform: translateX(0);
  }
  40%, 60% {
    transform: rotateZ(90deg);
  }
  90%, 100% {
    transform: translateX(0);
  }
}

/* General styling */
body {
  margin: 0;
  background: #e9b59f;
  font-family: HelveticaNeue, Arial, Sans-serif;
  color: #fff;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 300;
}

h2 {
  font-size: 0.75em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

a {
  text-decoration: none;
  color: #333;
}

.principle {
  width: 100%;
  height: 100vh;
  position: relative;
}

.shape {
  background: #2d97db;
  border: 1em solid #fff;
  width: 4em;
  height: 4em;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 时间节奏 (Timing)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档