正文

css3动画的简单学习

IP云
IP云V管理员/5 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

transform常用的属性（2D变化）：

translate(x,y) 定义 2D 转换。

scale(x,y) 定义 2D 缩放转换

rotate(angle) 定义 2D 旋转，在参数中规定角度。

translate定义元素在空间中的移动。对于x方向来说，向右移动，取值为正，对于y方向来说，向下移动为正值。

scale定义元素在空间中的缩放比例。默认是基于元素的中心为来缩放。

rotate定义元素在空间中的旋转。以前初中学课本中把逆时针旋转形成的角度叫做正角,把顺时针旋转的角度叫做负角。但是在css变换中，x轴的方向是从左到右的，y轴的方向是从上到下，与课本中的坐标方向相反，所以旋转角度的正负定义与以前学过的定义正好相反即顺时针为正，逆时针为负。

animation常用的属性

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

  • animation-name

    需要使用的keyframes规则名称，通常在keyframes规则中创建动画的具体细节。
  • animation-duration

    完成整个动画所持续的时间。通常以s或者ms为单位，记得添加单位。
  • animation-timing-function

    设置动画的速度变化曲线
  1. ease:默认值。该属性值使得动画的速度在动画开始和结束时比较慢，动画执行中间速度较快。
  2. ease-in:动画开始时的速度比较慢，随后加快。
  3. ease-out：动画在结束的时候速度比较慢。
  4. ease-in-out：动画慢速开始和结束的过渡效果
  5. linear：从开始到结束都是同样的速度。
  6. cubic-bezier(n,n,n,n)：在函数中自己定义曲线的值。使用的频率较少,可以使用工具网站来根据自己的需要定制不同的曲线。
  • animation-delay

    设置动画开始之前等待的时间。与动画持续时间类似，单位为s或者ms。
  • animation-iteration-count

    设置动画的播放次数。可以通过具体的数字来指定动画的播放次数，也可以通过css3规定的属性值infinite来设置动画无限次播放。
  • animation-direction

    设置动画是否需要反向播放。
  1. normal：默认值。设置动画应该正常播放，不需要反向播放。
  2. alternate：通常运用在无限次播放动画的情境中，动画循环播放时，每次都是从结束状态跳回到起始状态，感觉很突兀，该属性可以设置动画在动画执行完成之后，反向运动到动画起点，。
  • animation-fill-mode

    该属性主要用来设置动画在开始（设置延迟属性的情况下）和结束的状态下需要显示的效果。

none：动画完成之后回到动画没开始时的状态。

forwards：当动画完成时，元素的样式将保持keyframes最后一个关键帧中定义的样式。

backwards：在 animation-delay属性所指定的时间内，元素的样式将设置为keyframes中设置的第一帧的样式。

both：同时设置了forwards和backwards属性。即在动画等待的时间内，元素的样式为keyframes设置的第一帧的样式，动画结束时，元素的样式将保持最后一帧的样式。

基本的动画效果

元素飞入（上、下、左、右）

元素的透明度逐渐变化，同时位置也在不断变化。以从左边飞入为例： 

div{

    width: 100px;

	height: 100px;

	margin:80px 0 0 200px;

	background-color: #4993c8;

	animation: fadeInLeft 1000ms ease 5000ms both ;

}

@keyframes fadeInLeft {

      0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0);

      }

      100% {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

      }

    }

元素进入页面后左右晃动

元素进入页面后，在元素位置附近做振幅较小的晃动。以从左边进入为例： 

div{

    width: 100px;

	height: 100px;

	margin:80px 0 0 200px;

	background-color: #4993c8;

	animation: fadeInLeft 1000ms ease 5000ms both ;

}

 @keyframes slideRight {

  0% {

    opacity: 0;

    -webkit-transform: translateX(-150%);

    transform: translateX(-150%);

  }

  50% {

    opacity: 1;

    -webkit-transform: translateX(8%);

    transform: translateX(8%);

  }

  65% {

    -webkit-transform: translateX(-4%);

    transform: translateX(-4%);

  }

  80% {

    -webkit-transform: translateX(4%);

    transform: translateX(4%);

  }

  95% {

    -webkit-transform: translateX(-2%);

    transform: translateX(-2%);

  }

  100% {

    -webkit-transform: translateX(0%);

    transform: translateX(0%);

  }

}

淡入强调

透明度逐渐变化，尺寸先变大后变小，最后恢复正常尺寸

1、透明度变化

2、基于原来的尺寸缩放 

div{

    width: 100px;

	height: 100px;

	margin:80px 0 0 200px;

	background-color: #4993c8;

	animation: fadeInLeft 1000ms ease 5000ms both ;

}

@keyframes fadeIn {

  0% {

    -webkit-transform: scale(0) translateZ(0);

    transform: scale(0) translateZ(0);

    opacity: 0;

  }

  60% {

    -webkit-transform: scale(1.1) translateZ(0);

    transform: scale(1.1) translateZ(0);

    opacity: 1;

  }

  80% {

    -webkit-transform: scale(0.9) translateZ(0);

    transform: scale(0.9) translateZ(0);

    opacity: 1;

  }

  100% {

    -webkit-transform: scale(1) translateZ(0);

    transform: scale(1) translateZ(0);

    opacity: 1;

  }

}

元素旋转淡入

1、旋转。顺时针旋转需要设置初始的旋转角度为负值，反之亦然。

2、透明度发生变化 

div{

    width: 100px;

	height: 100px;

	margin:80px 0 0 200px;

	background-color: #4993c8;

	animation: rotateIn 1000ms ease 5000ms both ;

}

@-webkit-keyframes rotateIn {

  from {

    opacity: 0;

    -webkit-transform: rotate(-200deg);

    transform: rotate(-200deg);

  }

  to {

    opacity: 1;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

}

// 可以通过transform-origin属性来设置旋转元素的基点位置

页面箭头重复运动

主要通过animation的animation-iteration-count属性来规定动画无限次播放

思路1：设置动画移动的起始位置和终点位置，同时设置animation的animation-direction属性为alternate，轮流反向播放动画。

思路2：动画运动分成3个关键点，起始位置、50%位置和100%位置，100%时间点的位置与开始位置相同，不用设置animation的nimation-direction属性 

.arrow{

    position: absolute;

    left: 50%;

    bottom: 20px;

    margin-left: -20px;

    width: 40px;

    height: 24px;

    background: url('../images/arrow.png') 0 0 no-repeat;

    background-size: 100% 100%;

    z-index: 999;

    animation:arrowing1 1000ms ease-in-out infinite alternate;

    // animation:arrowing2 1000ms ease-in-out infinite;

}

@keyframes arrowing1 {

    0% {

      -webkit-transform: translateZ(0);

      transform: translateZ(0);

    }

    100% {

      -webkit-transform:translate3d(0,20px,0);

      transform:translate3d(0,20px,0);

    }

}

@keyframes arrowing2 {

    0% {

        -webkit-transform: translateY(-5px);

        transform: translateY(-5px);

    }

    50% {

        -webkit-transform: translateY(10px);

        transform: translateY(10px);

        opacity: 1

    }

    100% {

       -webkit-transform: translateY(-5px);

        transform: translateY(-5px)

    }

}

相关阅读

目录[+]