小目标

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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)
    }
} 
posted on 2017-11-12 17:39  自信哥  阅读(267)  评论(0编辑  收藏  举报