为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3 animate,transform,and transition

标签:
CSS3
animate

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

CSS animations 让CSS样式间的配置渐变成为可能。包含两部分:一个描述CSS动画的样式和一个指示动画样式起止的关键帧及可能的中间路线点

There are three key advantages to CSS animations over traditional script-driven animation techniques:

  1. They're easy to use for simple animations; you can create them without even having to know JavaScript.
  2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

CSS animation优于脚本驱动动画的三个关键点如下:

  1. 易用
  2. 运行效果好
  3. 让浏览器控制动画序列,让浏览器通过例如减少在当前不可见的选项卡中运行的动画的更新频率来优化性能和效率。
配置
  • main-properties:keyframes
  • sub-properties:
    • animation-delay: 延迟
    • animation-direction: 起点及自我重复的方向
    • animation-duration : 动画周期持续时间
    • animation-iteration-count:重复次数
    • animation-name:动画名
    • animation-play-state:动画播放状态
    • animation-timing-function:动画轨迹曲线
    • animation-fill-mode:动画执行前后应用的值
定义动画

示例:Making text slide across the browser window

/*Adding another keyframe*/
75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
p {
  animation-duration: 3s;
  animation-name: slidein;
/*Making it repeat*/
animation-iteration-count: infinite;
/*Making it move back and forth*/
animation-direction: alternate;
/*shorthand*/
animation: 3s infinite alternate slideIn;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.

改变CSS视觉模式的坐标空间,可让元素转变,旋转,缩放,扭曲

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Live examples
p {
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 0 -250px;

  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}
Using CSS transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

CSS transitions提供了一个控制改变CSS属性的动画速度的方式

注意:The set of properties that can be animated is subject to change. Developers should proceed with caution.

<body>
    <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
    <div class="box">Sample</div>
</body>
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

参考链接:

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7244
获赞与收藏
3476

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消