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

Css3 Animation 动画原则一

作者头像
grain先森
发布2019-03-28 17:29:55
3690
发布2019-03-28 17:29:55
举报
文章被收录于专栏:grain先森

挤压和拉伸 (Squash and stretch)

挤压和拉伸

这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时,碰击到地面会变扁,恢复的时间会越来越短。

创建对象的时候最有用的方法是参照实物,比如人、时钟和弹性球。

当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关,它会按需要在屏幕上缩放。例如,一个按钮会变大并变成一个信息框,或者错误信息会出现和消失。

尽管如此,挤压和伸缩效果可以为一个对象增加实物的感觉。甚至一些形状上的小变化就可以创造出细微但抢眼的效果。

HTML
代码语言:javascript
复制
<h1>Principle 1: Squash and stretch</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle one">
    <div class="shape"></div>
    <div class="surface"></div>
</article>
CSS
代码语言:javascript
复制
.one .shape {
 animation: one 4s infinite ease-out;
}

.one .surface {
 background: #000;
 height: 10em;
 width: 1em;
 position: absolute;
 top: calc(50% - 4em);
 left: calc(50% + 10em);
}

@keyframes one {
 0%, 15% {
   opacity: 0;
 }
 15%, 25% {
   transform: none;
   animation-timing-function: cubic-bezier(1,-1.92,.95,.89);
   width: 4em;
   height: 4em;
   top: calc(50% - 2em);
   left: calc(50% - 2em);
   opacity: 1;
 }
 35%, 45% {
   transform: translateX(8em);
   height: 6em;
   width: 2em;
   top: calc(50% - 3em);
   animation-timing-function: linear;
   opacity: 1;
 }
 70%, 100% {
   transform: translateX(8em) translateY(5em);
   height: 6em;
   width: 2em;
   top: calc(50% - 3em);
   opacity: 0;
 }
}

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.03.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 挤压和拉伸 (Squash and stretch)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档