css动画效果transtion,transform,animation

admin管理员组

文章数量:1026989

css动画效果transtion,transform,animation

前几天我在极客学院上学习css3动画有关视频，非常感兴趣，收获如下。

（一）嫦娥飞入飞出的效果

我们的目标是：鼠标移到a元素上，嫦娥飞进月亮，而且要有一种从远处来的模糊感，就是大俗话里的“仙气”；鼠标移走，嫦娥也飞离。

先分析这个要求，从中我们可以知道这涉及到两个动画，一个是位置上的改变，另一个是透明度的改变。

简单介绍下rgba;

rgba(0,0,0,0.5);//正如英文字母所预示那样，RGB是三色，那么A是什么？A是Alpha，即透明度，值为1----不透明。

主体body里是：

<a href="#点击后链接的网址" class="change " target="_blank">
    <img src="#嫦娥" alt="" />
</a>

那么想要实现鼠标移入移出对应嫦娥的飞入飞出，我们需要这么来做：

1.添加夜空圆月做背景

.change{

 background:url(夜空图URL) no-repeat center;

...}

2..在嫦娥上添加动画，先来设置鼠标没有移上a元素时：

img{
    display:block;
    width:300px;
    height:284px;
    opacity:0;//透明度为0，即嫦娥图不显现   

    -webkit-transform:translate(-100px,-100px);

 //以父元素为基准（父元素是a标签，我们设置它长宽,使其成为自动居中长方形区域，那么就是左上角的位置向上，向左各100px），定义了嫦娥飞入的初始位置

    transform: translate(-100px,-100px);
    -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;

//下面transition的参数表明

//我们要对opacity设置过渡效果

//持续时间为1s,也就是嫦娥要飞一秒

//以慢速开始和结束

//在鼠标移到a标签上0.5s后开始动画

//注意：这个有两个动画效果，一个是opacity，另一个是transform

//transform 的解释请直接访问w3school.
    transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
  }

transition-timing-function:

3.当鼠标移至a元素时

.change:hover img{
    -webkit-transform:translate(0px,0px);//嫦娥从（-100px,-10px）移至（0,0）
    transform:translate(0px,0px);
    opacity:1;//嫦娥图片逐渐显现（透明度从0逐渐变成1）
    -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
    transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
  }

（二）简单照片墙

目标：鼠标移上去照片扇形展开，移走照片合拢

分析：我们需要定义照片旋转打开的基点，还需要照片打开的角度，在这里设置动画就可以了       

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

先来看一下body里的内容:

<div class="cardfan">
   <img src="照片1URL" alt="" width="300" height="200"/>
   <img src="照片2URL" alt="" width="300" height="200"/>
   <img src="照片3URL" alt="" width="300" height="200"/>
 </div>

1.为照片设置样式

.cardfan > img{
    position:absolute;
     …

  //设置旋转点的位置

  -webkit-transform-origin: center 400px;
    transform-origin: center 400px;

    -webkit-transition: -webkit-transform .7s ease;
    transition: transform .7s ease;
  }

2.旋转角度的设置

这里有三张图片，我们可以用选择器来实现效果

.cardfan img:first-child{
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
  }

.cardfan:hover img:first-child{
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg);
  }

同理，我们也可以设置last-child；

（三）闪烁点动画

目标：实现一个圆点原地缩放的效果，类似呼吸灯

分析，实际上就是一个大圆点的缩放问题那么就要应用到transform

animation 属性是一个简写属性，用于设置六个动画属性：

body里的内容

<div class="spinner"></div>

1.绘制圆点

.spinner{
    width:40px;
    height:40px;
    background-color:green;
    border-radius:50%;//变圆形
    margin: 100px auto;

/*第一个参数需要绑定到选择器的keyframes名称blink

一次动画需要1s

无限次闪烁

以慢速开始和结束*/
    -webkit-animation:blink 1.0s infinite ease-in-out;
    animation:blink 1.0s infinite ease-in-out;
  }

2.设置闪烁效果（要考虑各浏览器的兼容问题哦）

@keyframes fadeOut{
    form{transform:scale(0.0);}
    to{transform:scale(1.0);opacity:0;}
  }

/*定义了从缩到没有到伸展到原来模样

scale定义伸缩；*/

（四）border旋转

目标：鼠标移入，边框旋转180，移出复位；也可以结合嫦娥的案例，使文字随着鼠标的移入移出来显示和消失

分析：border旋转，是独自旋转，所以需要将其独立出来，旋转需要用到的是transform；文字的变换请参考第一个例子

 border-color:yellow red blue green;/*按照上下左右的顺序来设置颜色*/

body里的内容：

<a href="#" class="demo">
  <div class="img" style="background-image:url(背景图URL"></div>
  <div class="mask">
   <div class="text">
    <h3>弦月</h3>
    <p>红霞朦江桥</p>
   </div>   
  </div>
  <div class="border"></div>
 </a>

1.img样式

.img{
   background-repeat:no-repeat;
   background-size:cover;/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域*/
   background-position: center center;
   border-radius:50%;/*圆形*/

}

2.border的动画效果设置

.border{
   position:absolute;
   border:10px solid #E08E05;
   border-top-color:#20629C;
   border-left-color:#20629C;
   top:0;
   left:0;
   border-radius:50%;
   -webkit-transition: all .5s ease-in;/*以慢速开始*/
   transition:all .5s ease-in;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
  }

.demo:hover .border{/*边框旋转180度*/
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
  }

3.文字动画的设置

.mask{
   position:absolute;
   top:0;
   left:0;
   border-radius:50%;
   -webkit-transition:all .5s ease-in;/*以慢速开始*/
   transition:all .5s ease-in;
   color:rgba(255,255,255,0);//透明度为0，不可见文字
  }

.demo:hover .mask{

 color:rgba(255,255,255,1);/*文字显现*/
  }

（五）钟摆运动

body里内容

<div class="stage">
   <img src="钟表图" alt="钟表" class="watch"/>

 </div>

动画的设置

.stage{
    width:120px;
    height:auto;
    margin:0 auto;
    position:relative;
    transform-origin:center top;/*定位表摆动的基点，顶部中点*/
    -webkit-transform-origin:center top;
    -webkit-transform:rotate(-30deg);
    transform:rotate(-30deg);
    -webkit-animation:sway 2.2s infinite alternate ease-in-out;/*alternate实现来回运动*/
    animation:sway 2.2s infinite alternate ease-in-out;
  }

@keyframes sway{
    to{
     transform:rotate(30deg);
    }
  }/*使得钟表图在定义的基点位置左右各30度来回摆动*/

（六）圆弧运动

animation实现

1.正圆运动

定义中心位置，定义起始位置，使得从起始位置绕中心位置做正圆运动

.rocketship{
    width:130px;
    height:250px;
   background:url(飞机图URL);
    background-size: cover;
    -webkit-transform-origin:  200% center;/*定义起始位置，其实这样的话，整个圆形就可以确定了，有圆心，有半径*/
    transform-origin:  200% center;
    -webkit-animation:circle 3s infinite linear;
    animation:circle 3s infinite linear;
  }

@keyframes circle{
   to{
    transform: rotate(360deg); /*一周360度*/
   }
  }

2.椭圆运动

正圆运动其实可以看成是正圆运动和上下运动的叠加，此时必须要保证正圆运动一周，上下运动一个来回。这样才可以叠加为一个椭圆运动

正圆运动

.plane{
    width:150px;
    height:142px;
    margin: 0 auto;
    -webkit-transform-origin:center 150%;
    transform-origin:center 150%;
    -webkit-animation:circle 2s infinite linear;
    animation:circle 2s infinite linear;
  }

@keyframes circle{
    to{
      transform:rotate(-1turn);/*逆时针做圆运动*/
    }
  }

上下运动
figure{
    margin-left: 200px;
    -webkit-animation:updown 1s infinite ease-in-out alternate;/*来回运动*/
    animation:updown 1s infinite ease-in-out alternate;

}

@keyframes updown{
      to{
       transform:translateY(200px);
      }
  }

css动画效果transtion,transform,animation

前几天我在极客学院上学习css3动画有关视频，非常感兴趣，收获如下。

（一）嫦娥飞入飞出的效果

我们的目标是：鼠标移到a元素上，嫦娥飞进月亮，而且要有一种从远处来的模糊感，就是大俗话里的“仙气”；鼠标移走，嫦娥也飞离。

先分析这个要求，从中我们可以知道这涉及到两个动画，一个是位置上的改变，另一个是透明度的改变。

简单介绍下rgba;

rgba(0,0,0,0.5);//正如英文字母所预示那样，RGB是三色，那么A是什么？A是Alpha，即透明度，值为1----不透明。

主体body里是：

<a href="#点击后链接的网址" class="change " target="_blank">
    <img src="#嫦娥" alt="" />
</a>

那么想要实现鼠标移入移出对应嫦娥的飞入飞出，我们需要这么来做：

1.添加夜空圆月做背景

.change{

 background:url(夜空图URL) no-repeat center;

...}

2..在嫦娥上添加动画，先来设置鼠标没有移上a元素时：

img{
    display:block;
    width:300px;
    height:284px;
    opacity:0;//透明度为0，即嫦娥图不显现   

    -webkit-transform:translate(-100px,-100px);

 //以父元素为基准（父元素是a标签，我们设置它长宽,使其成为自动居中长方形区域，那么就是左上角的位置向上，向左各100px），定义了嫦娥飞入的初始位置

    transform: translate(-100px,-100px);
    -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;

//下面transition的参数表明

//我们要对opacity设置过渡效果

//持续时间为1s,也就是嫦娥要飞一秒

//以慢速开始和结束

//在鼠标移到a标签上0.5s后开始动画

//注意：这个有两个动画效果，一个是opacity，另一个是transform

//transform 的解释请直接访问w3school.
    transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
  }

transition-timing-function:

3.当鼠标移至a元素时

.change:hover img{
    -webkit-transform:translate(0px,0px);//嫦娥从（-100px,-10px）移至（0,0）
    transform:translate(0px,0px);
    opacity:1;//嫦娥图片逐渐显现（透明度从0逐渐变成1）
    -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
    transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
  }

（二）简单照片墙

目标：鼠标移上去照片扇形展开，移走照片合拢

分析：我们需要定义照片旋转打开的基点，还需要照片打开的角度，在这里设置动画就可以了       

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

先来看一下body里的内容:

<div class="cardfan">
   <img src="照片1URL" alt="" width="300" height="200"/>
   <img src="照片2URL" alt="" width="300" height="200"/>
   <img src="照片3URL" alt="" width="300" height="200"/>
 </div>

1.为照片设置样式

.cardfan > img{
    position:absolute;
     …

  //设置旋转点的位置

  -webkit-transform-origin: center 400px;
    transform-origin: center 400px;

    -webkit-transition: -webkit-transform .7s ease;
    transition: transform .7s ease;
  }

2.旋转角度的设置

这里有三张图片，我们可以用选择器来实现效果

.cardfan img:first-child{
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
  }

.cardfan:hover img:first-child{
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg);
  }

同理，我们也可以设置last-child；

（三）闪烁点动画

目标：实现一个圆点原地缩放的效果，类似呼吸灯

分析，实际上就是一个大圆点的缩放问题那么就要应用到transform

animation 属性是一个简写属性，用于设置六个动画属性：

body里的内容

<div class="spinner"></div>

1.绘制圆点

.spinner{
    width:40px;
    height:40px;
    background-color:green;
    border-radius:50%;//变圆形
    margin: 100px auto;

/*第一个参数需要绑定到选择器的keyframes名称blink

一次动画需要1s

无限次闪烁

以慢速开始和结束*/
    -webkit-animation:blink 1.0s infinite ease-in-out;
    animation:blink 1.0s infinite ease-in-out;
  }

2.设置闪烁效果（要考虑各浏览器的兼容问题哦）

@keyframes fadeOut{
    form{transform:scale(0.0);}
    to{transform:scale(1.0);opacity:0;}
  }

/*定义了从缩到没有到伸展到原来模样

scale定义伸缩；*/

（四）border旋转

目标：鼠标移入，边框旋转180，移出复位；也可以结合嫦娥的案例，使文字随着鼠标的移入移出来显示和消失

分析：border旋转，是独自旋转，所以需要将其独立出来，旋转需要用到的是transform；文字的变换请参考第一个例子

 border-color:yellow red blue green;/*按照上下左右的顺序来设置颜色*/

body里的内容：

<a href="#" class="demo">
  <div class="img" style="background-image:url(背景图URL"></div>
  <div class="mask">
   <div class="text">
    <h3>弦月</h3>
    <p>红霞朦江桥</p>
   </div>   
  </div>
  <div class="border"></div>
 </a>

1.img样式

.img{
   background-repeat:no-repeat;
   background-size:cover;/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域*/
   background-position: center center;
   border-radius:50%;/*圆形*/

}

2.border的动画效果设置

.border{
   position:absolute;
   border:10px solid #E08E05;
   border-top-color:#20629C;
   border-left-color:#20629C;
   top:0;
   left:0;
   border-radius:50%;
   -webkit-transition: all .5s ease-in;/*以慢速开始*/
   transition:all .5s ease-in;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
  }

.demo:hover .border{/*边框旋转180度*/
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
  }

3.文字动画的设置

.mask{
   position:absolute;
   top:0;
   left:0;
   border-radius:50%;
   -webkit-transition:all .5s ease-in;/*以慢速开始*/
   transition:all .5s ease-in;
   color:rgba(255,255,255,0);//透明度为0，不可见文字
  }

.demo:hover .mask{

 color:rgba(255,255,255,1);/*文字显现*/
  }

（五）钟摆运动

body里内容

<div class="stage">
   <img src="钟表图" alt="钟表" class="watch"/>

 </div>

动画的设置

.stage{
    width:120px;
    height:auto;
    margin:0 auto;
    position:relative;
    transform-origin:center top;/*定位表摆动的基点，顶部中点*/
    -webkit-transform-origin:center top;
    -webkit-transform:rotate(-30deg);
    transform:rotate(-30deg);
    -webkit-animation:sway 2.2s infinite alternate ease-in-out;/*alternate实现来回运动*/
    animation:sway 2.2s infinite alternate ease-in-out;
  }

@keyframes sway{
    to{
     transform:rotate(30deg);
    }
  }/*使得钟表图在定义的基点位置左右各30度来回摆动*/

（六）圆弧运动

animation实现

1.正圆运动

定义中心位置，定义起始位置，使得从起始位置绕中心位置做正圆运动

.rocketship{
    width:130px;
    height:250px;
   background:url(飞机图URL);
    background-size: cover;
    -webkit-transform-origin:  200% center;/*定义起始位置，其实这样的话，整个圆形就可以确定了，有圆心，有半径*/
    transform-origin:  200% center;
    -webkit-animation:circle 3s infinite linear;
    animation:circle 3s infinite linear;
  }

@keyframes circle{
   to{
    transform: rotate(360deg); /*一周360度*/
   }
  }

2.椭圆运动

正圆运动其实可以看成是正圆运动和上下运动的叠加，此时必须要保证正圆运动一周，上下运动一个来回。这样才可以叠加为一个椭圆运动

正圆运动

.plane{
    width:150px;
    height:142px;
    margin: 0 auto;
    -webkit-transform-origin:center 150%;
    transform-origin:center 150%;
    -webkit-animation:circle 2s infinite linear;
    animation:circle 2s infinite linear;
  }

@keyframes circle{
    to{
      transform:rotate(-1turn);/*逆时针做圆运动*/
    }
  }

上下运动
figure{
    margin-left: 200px;
    -webkit-animation:updown 1s infinite ease-in-out alternate;/*来回运动*/
    animation:updown 1s infinite ease-in-out alternate;

}

@keyframes updown{
      to{
       transform:translateY(200px);
      }
  }

本文标签： css动画效果transtiontransformanimation