秦小

CSSMM4E 笔记 - 2.10 - Transforms, Transitions 和 Animations

发表于 | 分类于

Transforms

3D Transforms

Rotate

1
2
3
4
5
6
{
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(-45deg);
}

Scale

1
2
3
4
5
6
7
8
{
  transform: scale(2);
  transform: scaleX(2);
  transform: scaleY(2);
  transform: scale(-1);
  transform: scale(-1, 2);
  transform: scale(-0.5, .8);
}

Translate

1
2
3
4
5
{
  trnasform: translateX(-.5em);
  trnasform: translateY(-.5em);
  transform: translate(1px,2px);
}

Skew

1
2
3
4
5
6
7
8
9
10
{
  /* 下图 左 */
  transform: skew(45deg, 0);
  /* 下图 中 */
  transform: skew(0, 45deg);
  /* 下图 右 */
  transform: skew(25deg, 10deg);
  transform: skewX(25deg);
  transform: skewY(10deg);
}

Transformation组合

1
2
3
{
  transform: rotate(45deg) scale(2) translate(400px,500px) skew(45deg,0deg);
}

Origin

1
2
3
4
5
{
  transform-origin: left top;
  transform-origin: 0 0;
  transform-origin: 20% 45%;
}

Transitions

A few thins in plcace for trasition:
1.Two styles 2. Transition property 3. A trigger
transition properties:

1
2
3
4
rotate, scale, translate, skew
color, background-color, border-color, border-width, font-size, height, width, letter-spacing, line-height, margin, opacity, padding, word-spacing
top, left, right, bottom

complete list: https://www.w3.org/TR/css3-transitions/#animatable-properties

添加 Transition

1
2
3
4
5
6
7
8
.navButton {
  background-color: orange;
  transition-property: background-color; /* <== */
  transition-duration: 1s; /* <== */
}
.navButton:hover {
  background-color: blue;
}
1
2
3
4
5
6
7
8
{
  transition-property: clor, background-color, border-color;
  transition-property: all;
  transition-duration: .5s | 500ms;
  transition-property: color, background-color, border-color;
  transition-duration: .25s,  .75s,             2s;
}

Transition Timing

1
2
3
4
{
  transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out; 
  transition-timing-function: cubic-bezier(.20, .96, .74, .07);
}

Timing: http://www.the-art-of-web.com/css/timing-function/
Cubic Bezier: https://matthewlein.com/ceaser/

推迟Transition的开始

1
2
3
4
5
{
  transition-property: color, background-color, border-color;
  transition-duration: 1s,    1s,               .5s;
  transition-delay:    0,     0,                1s;
}

Tip:
比如在鼠标旋停弹出菜单时, 为使菜单立即出现:
比如在鼠标离开弹出菜单时, 为防止菜单立即消失:

1
2
3
4
5
6
.popMenu {
  transition-delay: 1s;  /* 延迟消失 */
}
.popMenu:hover {
  transition-delay: 0s;  /* 立即出现 */
}

Transition 速记法

1
2
3
4
5
6
{
  transition: property           duration timing-function delay;
  transition: color              1s       ease-in         1s,
              background-color   1s       ease-out        1s,
              border-color color 1s       ease-in-out     1s;
}

Animations

Transition vs. Animation:
Transition: One set properties => Another
Animation: Transition + 1. repeat, 2. pause, 3. reverse

Two steps to create animation:

  1. Define the animation - keyframes
  2. Apply the animation to an element.

定义 Keyframes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@-webkit-  -o- -moz-
@keyframes growAndGlow {
    from {
      background-color: yellow;
      animation-timing-function: cubic-bezier(1, .03, 1, .115);
    }
    
    20% {
      background-color: blue;
      animation-timing-function: linear;
    }
    
    45% 60% {
      background-color: orange; /* solid orange@45%-60% */
    }
    
    70% 90% {
      background-color: gray;
    }
    
    80% 95% {
      background-color: red; /* gray@70% -> red@80% -> gray@90% -> red@95% */
    }
    
    to {
      background-color: black;
    }
}

应用 Animation

Apply to normal element h1, or with pseudo class :hover, :active, :target, :focus ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes fadeIn {}
.announcement {
  animation-name: fadeIn;  /* name */
  animation-duration: 1s;  /* duration */
  animation-timing-function: ease-out; /* timing-function */
  animation-delay: 1s;     /* delay */
  animation-iteration-count: 2 | infinite; /* iteration-count */
  animation-direction: alternate; /* revers its direction on second time */
  /* By default, animations end and then return to its original
  * state. Use fill-mode: forwards make them keep the end state.
  */
  animation-fill-mode: forwards;
}

Animation 速记法

1
2
3
4
5
{
  animation: name duration timing-function iteration-count direction delay fill-mode, ...;
  animation: fadeOut 2s    ease-in-out     5s     2 alternate forwards,
            fadeIn  2s    ease-in         5s     2 alternate forwards;
}

暂停 Animation

1
2
3
4
5
6
7
.fade {
  animation: fadeOut 2s ease-in 2 alternate 5s forwards,
             glow 5s;
}
.fade:hover {
  animation-play-state: paused;
}