4. Animation【动画】

4. Animation【动画】

1. 移动

// 后写覆盖先写 
transform: translateX(100px); //【正:向右】【负:向左】
transform: translateY(100px); //【正:向下】【负:向上】
transform: translate(100px, 100px);	

2. 缩放

// 【x：横向收缩】【y：纵向收缩】       
transform:scale(1.02,1.02); // 值一样可省略y 	
transition-duration: 0.7s;  // 过度时间 

3. 翻转

transform: rotatey(180deg);	//水平翻面
transform: rotatex(180deg);	//垂直翻面
transition-duration: 3s;	//过度时间 

4. 旋转

transform: rotate(90deg); // 正：顺时针 
transition-duration: 1s;  // 过度时间 

5. 扭曲

transform:skew(x,y);
transform:skewX(30deg);
transform:skewY(30deg);

6. 过度效果

<div class="animation_a1">过度效果</div>

.animation_a1 {
  width: 100px;
  background-color: red;
  transition: width 2s;	// transition: 属性 时长s; 
}
.animation_a1:hover {width:300px;}

transition-duration: 1s; //过度时间

7. 动画效果

animation: 动画名 时长 速度 延时 播放次数 true是否循环; 

8. 心跳案例

<div class="animation_a2"></div>

@keyframes heart_jump {
  0% {transform: scale(1)}
  50% {transform: scale(1.5)}
  100% {transform: scale(1)}
}
.animation_a2 {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  animation: heart_jump 2s infinite; 
}
// infinite无限循环 

9. 文字滚动

<p class="animation_a3">文字滚动的内容</p>

@keyframes text_move {
  100% {
    transform: translateX(-100%);
  }
}
.animation_a3 {
  display: inline-block;
  white-space: nowrap;
  animation: 2s text_move linear infinite normal;
}