CSS动态效果常用整理 animation,transition,transform

一、animation

  • 浏览器支持
属性

 

 

 

 

 

@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

例:

43.0 
4.0 -webkit- 【左上第一个】:

意思是chrome的43.0以上的版本支持动画属性@keyframes ,4.0以上的版本支持加 @-webkit-keyframes  的动画属性。

 

  • @keyframes

@keyframes规则是创建动画过程。

变化过程使用:

方式一:%,0-100%,0%是开头动画,100%是当动画完成。

方式二:关键字"from"和"to",这是和0%到100%相同。

@keyframes myfirst  /*myfirst是动画名称,在animation中使用*/ 
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from   {background: red;}
    to {background: green;}
}
  • animation    

 animation 属性是在选择器中使用。

语法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
说明
animation-name 对应 @keyframes 动画的名称。
animation-duration 动画指定需要多少秒或毫秒完成,默认是 0。
animation-timing-function 设置动画将如何完成一个周期,动画的速度曲线。默认是 "ease"(动画以低速开始,然后加快,在结束前变慢)。【linear,ease,ease-in,ease-in,ease-in-out,cubic-bezier(n,n,n,n)】
animation-delay 设置动画在启动前的延迟间隔。默认是 0。
animation-iteration-count 设置动画的播放次数。默认是 1。
animation-direction 设置循环播放动画的方向。默认是 "normal"。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。默认是 "running"。

例:

div{
    animation: myfirst 5s linear 2s infinite alternate;
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

 

 

二、transition属性

控制过渡效果。

  • 支持浏览器:

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

  • 语法:

    默认值:transition:  all 0 ease 0;

transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。【如:all, none, width, height 等】
transition-duration 规定完成过渡效果需要多少秒或毫秒。【如:0.5s】
transition-timing-function 规定速度效果的速度曲线。【如:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);】
transition-delay 延时多少秒或毫秒开始过渡效果。【如:2s,2ms】

附:速度曲线的含义:

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

例:

top属性值变化时的过渡效果:

div{
    top: 0;
    transition: top 0.4s ease 0s;
}

例:hover上移效果

CSS动态效果常用整理 animation,transition,transform_第1张图片

.box:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}

.box:hover {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    transition: all 300ms ease;
}

区分两个 t 开头的属性:

  • transform 

转换属性。可以对元素进行旋转、缩放、移动或倾斜。

常用部分属性:

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
  • translate 属性

偏移属性。

 

 

你可能感兴趣的:(Css)