05_css中的过渡和动画效果了解吗

2020-04-20 本文已影响0人沐向

一、CSS3 过渡

1、CSS3 过渡简介

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

（1）实现过渡效果的两个要件

规定把效果添加到哪个 CSS 属性上
规定效果的时长

（2）定义动画的规则

过渡transition的作用将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

2、transition 属性

（1）语法

{ 
    transition： 属性名 持续时间 过渡方法 延迟时间 
}

transition-property：属性的名字（如果是一个属性就带有这个属性的名字；如果是多个属性，属性名之间用逗号隔开；如果是所有属性，用all表示即可。）表示对哪个属性进行变化。
transition-duration：变化持续的时间长度（秒或是毫秒）。
transition-timing-function：过渡实现的方式（比如说，先慢后快/先快后慢），具体实现的时候是以函数来实现的。
transition-delay：过渡开始前等待的时间，单位为秒或是毫秒。

（2）transition-timing-function 属性取值

linear 匀速（线型过渡）
ease 先慢后快再慢
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 开头慢结尾慢，中间快

3、渐变特效

（1）线性渐变 linear-gradient()

示例：

div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.grad1 {
   background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.grad2 {
   background: linear-gradient(to top right, #000, #f00 50%, #090);
}

<div class="grad1"></div>
<div class="grad2"></div>

（2）径向渐变 radial-gradient()

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下：

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

示例：

div { background: radial-gradient(red, green, blue); }

以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变，效果如下图：

完整的代码可以写成：

div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }
或
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

4、实例

实例1：原有的状态是灰底红字，鼠标悬停在上面利用transition属性设置了一个3s 之内的变化，背景为由红到蓝的渐变色，文字颜色也逐渐变成白色

首先定义div标签的原始状态
再设置当鼠标悬停在上面的状态

div {
    height: 100px;
    width: 300px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    align-content: center;
    color: #f00;
    font-size: 30px;
    background-color: #999;
    transition:all 1s linear;
}
div:hover {
    color: #fff;
    background: linear-gradient(to bottom,#f00,#00f);
}
    
<div> transition </div>

实例2：鼠标滑过图片放大

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;
}
.container img {
  transition: all 1.2s ease;
}
.container img:hover{
  transform: scale(1.2);
}

<div class="container">
  <img src="http://img1.imgtn.bdimg.com/it/u=2214428394,3333726185&fm=26&gp=0.jpg" alt="" />
</div>

二、CSS3 动画

1、CSS3 中的动画实现的是什么效果

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

（1）实现动画效果两要件

首先要定义一个动画，定义一个@keyframes 规则（关键帧）
调用动画动画定义好之后，使用animation 属性调用动画

（2）了解动画的形成原理

是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果

2、animation 属性设置动画效果

（1）animation 属性取值

@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name 规定@keyframes 动画名称
animation-duration 规定一个动画完成的周期所花费的秒或毫秒。默认值为0，
animation-timing-function 规定动画的速度曲线。默认值为ease
animation-delay 动画开始前等待的时间。取值可为负（-2s 动画跳过 2 秒进入动画周期），属性不兼容 IE 9以及更早版本的浏览器.
animation-iteration-count 规定动画播放的次数。默认值为1
animation-direction 规定动画是否在下一周期逆向地播放。默认值是normal
animation-play-state 规定动画是否正在运行或暂停。默认值是running
animation-fill-mode 规定对象动画时间之外的状态

（2）animation-timing-function 属性取值

linear 匀速（线型过渡）
ease 先慢后快再慢
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 开头慢结尾慢，中间快

3、实例

实例1：用动画animation属性实现在位置变化的同时颜色也发生相应的变化

颜色 : 由红色—黄色—蓝色—绿色—红色

位置：距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px（回到原地）

（1）animation属性：@keyframes(关键帧) 动画名称为mycolor；一个动画周期为5s；动画运动先慢后快再慢ease；动画开始前等待2s；无限(infinite)循环播放；动画正在运行(runing)

div {
     width: 200px;
     height: 200px;
     background: #f00;
     position: relative;
     animation-name: mycolor; 
     /*animation-name规定@keyframes 动画名称*/
     animation-duration: 5s; 
     /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/
     animation-timing-function: ease; 
     /*animation-timing-function规定动画的速度曲线*/
     animation-delay: 2s; 
     /*animation-delay规定动画何时开始。默认值为0*/
     animation-iteration-count: infinite;
      /*animation-iteration-count规定动画播放的次数*/
     animation-direction: alternate; 
     /*animation-driection规定动画是否在下一周期逆向地播放*/
     animation-play-state: running;  
     /*animation-play-state规定动画是否正在运行或暂停*/
}
@keyframes mycolor {
      0%   {background:red;left:0px; top:0px; }
      25%  {background:yellow; left:200px; top:0px;}
      50%  {background:blue;left:200px; top:200px}
      75%  {background:green;left:0px; top:200px;}
     100% {background:red;left:0px; top:0px;}
}

<div></div>

（2）animation 的简写属性：

div {
    width:200px;
    height:200px;
    background:red;
    position:relative;
    animation:mycolor 5s linear 2s infinite alternate;
}

实例2： Loading（加载）动画效果

.loader {
  position: fixed;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border: 3px solid #eee;
  border-radius: 50%;
  border-top: 3px solid #3498db;
  animation: spin 1s linear infinite;
  
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader"></div>