CSS3动效(Transitions、Transforms、Animation)

戏子无情 提交于 2019-12-22 21:30:52
理解:
  1. transition 过渡 连续的、从a到b
  2. transform 变换 旋转、缩放、偏移
  3. animation 动画
 
一、transition
1.理解
  过渡,用于平滑的改变CSS值,举个例子:
change{
  width:100px;
  height:100px;
  background:yellow;
  transition:background 10s;
}
change:hover{
  background:red;
}

  意思就是说先在change这个css样式里面“声明”:如果我的background属性发生了变化,那么它的变化过程是连续变化(渐变),这个变化过程持续10s。

  所以,transition 就是用来定义,当一个变化发生时,它变化的连续性和时间,以及连续过程的快慢情况的(先慢后快、先快后慢等)。

  transition不控制变化的产生,而是只控制变化发生后的过渡效果。

2.使用

  transition属性是下面几个属性的缩写:

  • transition-property指定哪个属性应用过渡,比如transition-property:background就是指定background属性应用过渡。
  • transition-duration指定这个过渡的持续时间
  • transition-delay过渡延迟多长时间开始
  • transition-timing-function指定过渡动画缓动类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

其中,linear线性过度,ease-in由慢到快,ease-out由快到慢,ease-in-out由慢到快在到慢。

  使用transition可以将这些属性合并来写,顺序为  属性  持续时间  过渡类型  延迟时间

二、transform

1.理解

  transition不控制变化的产生,与之相对,transform就是用来产生变化的,比如选择,缩放等等。但是transform的变化是没有过渡效果的,就是直接显示变化过的样子了,我们将transition和transform一起用,就能产生渐变的动画效果了。比如旋转,移动等等。

2.使用

  2D转换

  • translate(x,y)  相对于当前位置移动  值100px  表示100像素  translateX()  translateY()
  • rotate(角度)  顺时针旋转(负值表示逆时针旋转)  值30deg 表示30度
  • scale(a,b)  尺寸缩放  值2  表示缩放2倍  scaleX()  scaleY()
  • skew( 角度,角度)  翻转,x方向,y方向  值30deg  表示30度  skewX()  skewY()

  可以使用matrix(n,n,n,n,n,n)将这些变化整合在一起(实际上上面四个变换的本质都是通过 matrix 矩阵来实现的,如果要实现没有提供的效果,可以通过这个函数直接控制)

  【注】:transform变换的参照点默认为中心点,可以通过transform-origin(a,b)改变参照点的位置,a,b的值可以是百分比,px,em等,或者left center right  top bottom center

  3D转换

  • translate3d(x,y,z)  3D移动  translateX(x) translateY(y) translateZ(z)
  • scale3d(x,y,z)  3D缩放  scaleX(x) scaleY(y) scaleZ(z)
  • rotate3d(x,y,z,angle)  3D旋转  rotateX(angle) rotateY(angle) rotateZ(angle)
  • prespective(n)  透视视图

transition和transform一起使用的例子:

.change{
    transition:all 2s ease;
}
.change:hover{
    transform:rotate(720deg) scale(2,2);
}

 

 三、animations 

  通过一起使用transition和transform已经可以实现一些动画效果,但是对于复杂的动画,使用animations更加合适。

1.简介

  @keyframes (关键帧)用于创建动画,写法:  

@keyframes name{
    from{//start css
    }
    to{//end css
    }
}
//or
@keyframes name{
    0%{//start css
    }
    50%{//center css
    }
    100%{//end css
    }
}

【注】:使用关键帧先定好动画变换过程中的关键样式,然后再使用连续变化或者不连续变化实现动画效果

  animation  通过关键帧产生动画效果,所有动画效果的简写属性,例子:

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}

@keyframes myfirst{
    from {
        background:red;
    }
    to {
        background:yellow;
    }
}    

2.属性

animation-name  @keyframes动画的名称

animation-duration  动画完成一个周期所需的秒或者毫秒

animation-timing-function  动画的速度曲线 

  •   linear  匀速
  •   ease  默认 慢-快-慢
  •   ease-in  以快结束
  •   ease-out  以慢结束
  •   ease-in-out  以慢开始和结束  和ease的区别:ease-in-out中间部分是近似匀速的
  •   cubic-bezier(n,n,n,n)  贝塞尔曲线  n取值0或者1
  •   step-start  在帧间变化的过程中,以下一帧的显示效果来填充间隔动画,即不连续动画(逐帧动画)
  •   step-end  以上一帧的显示效果来填充间隔动画
  •   steps()  可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数(start/end)来决定显示效果。第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。

animation-delay  动画什么时候开始(秒或者毫秒)

animation-iteration-count  动画被播放的次数  数字或者infinite(无限)

animation-direction  是否反向播放动画  

  •   normal   正常播放 正向
  •   reverse  反向播放
  •   alternate  动画在奇数次正向播放,在偶数次反向播放
  •   alternate-reverse  动画在奇数次反向播放,在偶数次正向播放
  •   initial  默认值
  •   inherit  从父元素继承

animation-fill-mode  动画不播放时,应用到元素的样式

  •   none  默认,无
  •   forwards  动画停留在结束帧
  •   backwords  动画完成后停留在初始帧
  •   both  同时遵循forwards和backwords
  •   initial  默认值
  •   inherit  从父元素继承

animation-play-state  动画运行和暂停

  •   paused   暂停
  •   running  运行

 3.animation简写

  可以通过animation来将这些元素写在一起:

 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

  具体一点:

 animation:myAnim 1s linear 1s infinite alternate both running; 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!