一、CSS3动画库 Animatable

什么是css3动画?

经过 CSS3,咱们能够创立动画,这能够在许多网页中替代动画图片、Flash 动画以及 JavaScript。

CSS3带来了圆角,半透明,暗影,突变,多布景图等新的特征,轻松完成了规划稿中常见的图层款式,用简练的代码替代图片,替代了剩余的空标签。

现成的CSS3动画库:

background-color

.background-color { background:#708090; animation:1s ease 0s alternate none infinite background-color;}
@keyframes background-color{
    from{ background:#708090;}
    to{ background:#000;}
}
1

background-position

background-position 特点设置布景图画的开端方位,默许值:0% 0%,作用等同于left top

典范一:

.background-position-1 { background-image: -moz-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;}
@keyframes background-position-1{
  from{ background-position:0 0;}
  to{ background-position:100% 100%;}
}
1

典范二:

.background-position-2 { background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(-45deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;}
@keyframes background-position-2{
  from{ background-position:3px 0, 3px 0, 15px -150px, 15px -150px;}
  to{ background-position:3px -70px, 3px -70px, 15px -80px, 15px -80px;}
}
1

background-size

background-size 特点规矩布景图片的尺度。在 CSS3 之前,布景图片的尺度是由图片的实践尺度决议的。在CSS3中,能够规矩布景图片的尺度,这就答应咱们在不同的环境中重复使用布景图片。

.background-size {background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center; animation:1s ease 0s alternate none infinite background-size;}
@keyframes background-size{
    from{ background-size:5px 5px;}
    to{ background-size:150px 150px;}
}
1

border-radius

border-radius 特点是一个简写特点,用于设置四个 border-*-radius 特点。

典范一

.border-radius-1 { animation:1s ease 0s alternate none infinite border-radius-1;}
@keyframes border-radius-1{
  from{ border-radius:0;}
  to{ border-radius:50%;}
}
1

典范二

.border-radius-2 { animation:1s ease 0s alternate none infinite border-radius-2;}
@keyframes border-radius-2{
  from{ border-radius:0 100%;}
  to{ border-radius:100% 0;}
}
1

border-width

典范一

.border-width-1 {border-style:solid; border-color: black; animation:1s ease 0s alternate none infinite border-width-1;}
@keyframes border-width-1{
    from{ border-width:0;}
    to{ border-width:75px;}
}
1

典范二

.border-width-2 {border-style:dashed; border-color: black; animation:1s ease 0s alternate none infinite border-width-2;}
@keyframes border-width-2{
    from{ border-width:0;}
    to{ border-width:35px;}
}
1

典范三

.border-width-3 {border-style:double; border-color: black; animation:1s ease 0s alternate none infinite border-width-3;}
@keyframes border-width-3{
    from{ border-width:0;}
    to{ border-width:75px;}
}
1

box-shadow

box-shadow 特点向框增加一个或多个暗影

典范一

.box-shadow-1 { animation:1s ease 0s alternate none infinite box-shadow-1;}
@keyframes box-shadow-1{
    from{ box-shadow:0 0 black;}
    to{ box-shadow:0 150px 10px -50px rgba(0,0,0,.5);}
}
1

典范二

.box-shadow-2 { animation:1s ease 0s alternate none infinite box-shadow-2;}
@keyframes box-shadow-2{
    from{ box-shadow:none;}
    to{ box-shadow:inset -75px -75px 400px #000;}
}
1

典范三

.box-shadow-3 { box-radius: 1px; animation:1s ease 0s alternate none infinite box-shadow-3;}
@keyframes box-shadow-3{
    from{ box-shadow:inset 0 0 75px 75px slategray, 0 0 0 slategray;}
    to{ box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;}
}
1

color

CSS3 Color特点在传统的hex和RGB值中增加了HSL特性,也便是增加了Opacity(透明度)和Alpha channels

.color { animation:1s ease 0s alternate none infinite color;}
@keyframes color{
    from{ color:white;}
    to{ color:black;}
}
1

font-size

.font-size { animation:1s ease 0s alternate none infinite font-size;}
@keyframes font-size{
    from{ font-size:60px;}
    to{ font-size:300px;}
}
1

width

.width { animation:1s ease 0s alternate none infinite width;}
@keyframes width{
    from{ width:150px;}
    to{ width:330px;}
}  

height

.height { animation:1s ease 0s alternate none infinite height;}
@keyframes height{
    from{ height:150px;}
    to{ height:0;}
}  

letter-spacing

.letter-spacing { animation:1s ease 0s alternate none infinite letter-spacing;}
@keyframes letter-spacing{
    from{ letter-spacing:0;}
    to{ letter-spacing:100px;}
}  
1

line-height

.line-height { animation:1s ease 0s alternate none infinite line-height;}
@keyframes line-height{
    from{ line-height:10px;}
    to{ line-height:300px;}
}  
1

opacity

.opacity { animation:1s ease 0s alternate none infinite opacity;}
@keyframes opacity{
    from{ opacity:1;}
    to{ opacity:0;}
}  
1

outline-width

.outline-width { outline-color:black; outline-style: solid; animation:1s ease 0s alternate none infinite outline-width;}
@keyframes outline-width{
    from{ outline-width:0;}
    to{ outline-width:100px;}
} 
1

outline-offset

.outline-offset { outline-style: dashed; outline-color:slategray; animation:1s ease 0s alternate none infinite outline-offset;}
@keyframes outline-offset{
    from{ outline-offset:-5px;}
    to{ outline-offset:30px;}
}
1

outline-color

.outline-color { outline-width: 30px; outline-style: solid; animation:1s ease 0s alternate none infinite outline-color;}
@keyframes outline-color{
    from{ outline-color:transparent;}
    to{ outline-color:red;}
}   
1

padding

.padding { animation:1s ease 0s alternate none infinite padding;}
@keyframes padding{
    from{ padding:0;}
    to{ padding:0 200px 0 50px;}
}   

text-indent

.text-indent { animation:1s ease 0s alternate none infinite text-indent;}
@keyframes text-indent{
    from{ text-indent:0;}
    to{ text-indent:100px;}
}  
1

text-shadow

典范一

.text-shadow-1 { animation:1s ease 0s alternate none infinite text-shadow-1;}
@keyframes text-shadow-1{
    from{ text-shadow:0 0 black;}
    to{ text-shadow:20px 20px 10px rgba(0,0,0,.5);}
}  
1

典范二

.text-shadow-2 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-2;}
@keyframes text-shadow-2{
    from{ text-shadow:0 0 0 white;}
    to{ text-shadow:0 0 10px white;}
}
1

典范三

.text-shadow-3 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-3;}
@keyframes text-shadow-3{
    from{ text-shadow:0 0 white;}
    to{ text-shadow:0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;}
} 
1

top

.top { position:relative; animation:1s ease 0s alternate none infinite top;}
@keyframes top{
    from{ top:0;}
    to{ top:100px;}
}
1

transform

典范一

.transform-1 { animation:1s ease 0s alternate none infinite transform-1;}
@keyframes transform-1{
    from{ transform:rotate(0deg);}
    to{ transform:rotate(360deg);}
}
1

典范二

.transform-2 { animation:1s ease 0s alternate none infinite transform-2;}
@keyframes transform-2{
    from{ transform:scale(1);}
    to{ transform:scale(2);}
}
1

典范三

.transform-3 { animation:1s ease 0s alternate none infinite transform-3;}
@keyframes transform-3{
    from{ transform:skew(0);}
    to{ transform:skew(180deg);}
}
1

典范四

.transform-4 { animation:1s ease 0s alternate none infinite transform-4;}
@keyframes transform-4{
    from{ transform:rotate(0) scale(1);}
    to{ transform:rotate(360deg) scale(0);}
}
1

典范五

.transform-5 { animation:1s ease 0s alternate none infinite transform-5;}
@keyframes transform-5{
    from{ transform:perspective(400px) rotateY(0);}
    to{ transform:perspective(400px) rotateY(360deg);}
}
1

典范六

.transform-6 { animation:1s ease 0s alternate none infinite transform-6;}
@keyframes transform-6{
    from{ transform:perspective(400px) rotateX(0);}
    to{ transform:perspective(400px) rotateX(360deg);}
}
1

典范七

.transform-7 { animation:1s ease 0s alternate none infinite transform-7;}
@keyframes transform-7{
    from{ transform:perspective(400px) rotateY(0);}
    to{ transform:perspective(400px) translateZ(150px) rotateY(180deg);}
}
1

典范八

.transform-8 { animation:1s ease 0s alternate none infinite transform-8;}
@keyframes transform-8{
    from{ transform:perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);}
    to{ transform:perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);}
}
1

典范九

.transform-9 { animation:1s ease 0s alternate none infinite transform-9;}
@keyframes transform-9{
    from{ transform:perspective(400px) rotate3d(.5,.5,0,0deg);}
    to{ transform:perspective(400px) rotate3d(.5,.5,0,180deg);}
}
1

典范十

.transform-10 {transform-origin: 100% 50%; animation:1s ease 0s alternate none infinite transform-10;}
@keyframes transform-10{
    from{ transform:perspective(400px) rotate3d(0,1,0,0deg);}
    to{ transform:perspective(400px) rotate3d(0,1,0,-180deg);}
}
1

典范十一

.transform-origin {transform:rotate(45deg); animation:1s ease 0s alternate none infinite transform-origin;}
@keyframes transform-origin{
    from{ transform-origin:50% 50%;}
    to{ transform-origin:0 100%;}
}
1

二、CSS3动画详解

1、变形&过渡

2D变形&过渡

旋转:设定旋转视点,对应css:transform:rotate(ndeg) (东西里n为-360 – 360间的恣意数值)

X轴缩放:设定X轴方向缩放,对应css: transform:scaleX(n)(东西里n为-5 – 5间的恣意数值)

Y轴缩放:设定Y轴方向缩放,对应css: transform:scaleY(n)(东西里n为-5 – 5间的恣意数值)

X轴位移:设定X轴位移,对应css:transform:translateX(npx)

Y轴位移:设定Y轴位移,对应css:transform:translateY(npx)

X轴歪斜:设定X轴歪斜,对应css:transform:skewX(ndeg)

Y轴歪斜:设定Y轴歪斜,对应css:transform:skewY(ndeg)

矩阵变形:设定矩阵变形,对应css:transform:matrix(a,c,e,b,d,f) c,e值用正弦或余弦值表明,ab为缩放值,df为位移值

变形原点 :设定变形原点,对应css:transform-origin:X Y;transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默许点是元素的中心点。其间X和Y的值能够是百分 值,em,px,其间X也能够是字符参数值left,center,right;Y和X相同除了百分值外还能够设置字符值 top,center,bottom,这个看上去有点像咱们background-position设置相同;下面我列出他们相对应的写法:

  1. top left | left top 等价于 0 0 | 0% 0%
  2. top | top center | center top 等价于 50% 0
  3. right top | top right 等价于 100% 0
  4. left | left center | center left 等价于 0 50% | 0% 50%
  5. center | center center 等价于 50% 50%(默许值)
  6. right | right center | center right 等价于 100% 50%
  7. bottom left | left bottom 等价于 0 100% | 0% 100%
  8. bottom | bottom center | center bottom 等价于 50% 100%
  9. bottom right | right bottom 等价于 100% 100%

其间 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是笔直方向的取值,其间top=0%;center=50%;bottom=100%;假如只取一个值,表明笔直方向值不变

过渡特点:履行改换的css特点,语法:transition-property

推迟时刻:指定元素 转化进程的继续时刻,语法:transition-duration

过渡作用:答应你依据时刻的推进去改动特点值的改换速率,语法:transition-timing-function。点击对应按钮增加过渡作用,点击cubic-bezier()自界说立方贝塞尔曲线作用。

3D变形&过渡

透视:perspective有两种写法,一种是设置一切的子元素有一个一同的透视值,perspective作为一个特点值来写;一种是直接作用于元素自身,perspective作为transform的一个函数来写如:
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}

X轴旋转: rotateX(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的X轴旋转,语法:transform:perspective(length) rotateX(angele);

Y轴旋转: rotateY(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的Y轴旋转,语法:transform:perspective(length) rotateY(angele);

Z轴旋转: rotateZ(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的Z轴旋转,语法:transform:perspective(length) rotateZ(angele);

X轴缩放:scaleX():表明只在X轴(水平方向)缩放元素。

Y轴缩放:scaleY():表明只在Y轴(笔直方向)缩放元素。

Z轴缩放:scaleZ():表明只在Z轴缩放元素。条件是元素自身或许元素的父元素设定了透视值

X轴位移: : 表明只在X轴(水平方向)移动元素。语法:translateX();

Y轴位移: 表明只在Y轴(水平方向)移动元素。语法:translateY();

Z轴位移: 表明只在Z轴(水平方向)移动元素。语法:translateZ();

X轴歪斜:设定X轴歪斜,对应css:transform:skewX(ndeg)

Y轴歪斜: :设定Y轴歪斜,对应css:transform:skewY(ndeg)

变形原点: 同2D

过渡特点: 同2D

过渡时刻: 同2D

推迟时刻: 同2D

过渡作用: 同2D

2、自界说动画

动画称号:自界说动画的称号, 对应css:animation-name:

履行时刻:指定目标动画的继续时刻,对应css: animation-duration:

推迟履行设置动画推迟履行的时刻,对应css: animation-delay:

履行次数:设置目标动画的循环次数,对应css: animation-iteration-count:或infinite(无限循环)

变形原点:同变形&过渡

过渡作用:答应你依据时刻的推进去改动特点值的改换速率,语法:animation-timing-function。点击对应按钮增加过渡作用,点击cubic-bezier()自界说立方贝塞尔曲线作用。

播映方向::设置目标动画循环播映次数大于1次时,动画是否反向运动。语法:animation-direction:,normal:正常方向,reverse:动画反向运转(FF14.0.1以下不支持),alternate:动画会循环正反方向替换运动,alternate-reverse:动画从反向开端,再正反方向替换运动,运动方向一直与alternate界说的相反。(FF14.0.1以下不支持)

躲藏布景:设置目标动画时刻之外的状况。语法:animation-fill-mode:, none:默许值。不设置目标动画之外的状况;forwards:结束后坚持动画结束时的状况,但当animation-direction为0,则动画不履行,继续坚持动画开端时的状况;backwards:结束后回来动画开端时的状况;both:结束后可遵从forwards和backwards两个规矩。

动画状况设置目标动画的状况,语法:animation-play-state:, running:默许值。运动;paused:暂停。

履行动画的特点: 设置动画进程中目标特点

3、动画库

的动画库。Animate.css是由Dan Eden制造的CSS3动画作用合集。只要在页面引进该款式表,然后给要增加动作的元素中增加对应动画的class即可。

点击对应作用右侧检查实例,点击检查代码可直接检查对应作用的源码。

三、运用CSS3的页面事例

1、纯CSS3完成质感发光动画按钮
2、10大经典CSS3菜单使用赏识
3、9种CSS3炫酷图片预览展现动画特效
4、纯CSS3炫酷3D旋转立方体爆破打开动画特效

CSS3东西介绍

cssanimate

CSS3能够完成许多美丽的动画,但写起来有点费事,一个动画有时候会调整几十分钟,改一点点代码又要到浏览器上改写,这是个很厌烦的工作。走运的是,在线东西处理了咱们的问题,最大特征便是以图形界面方法让你容易完成美丽的CSS3动画作用,下面一同看看这个在线东西的介绍。

Timeline(时刻轴)

Timeline是引导动画的重要区域,就像制造逐帧动画相同,能够调整每帧的内容。用户调整结束后,直接点击左下角的播映按钮即可看到作用。

视区

视区便是CSS3动画预览和调整区域,所见即所得,很强壮。

特点面板

用于调整动画细节参数,能够对关键帧进行更精密的调整,如时刻、旋转、重复次数等。

Code面板

当你调整完动画后,那么就在这儿直接COPY到你的网页上就能使用了,别的你还能够修正Class和Animation称号,还有浏览器前缀选项,依据需求调整。

总结

这确实是一个很便利的CSS3动画在线制造东西,即便对CSS代码不太了解的规划师们也能够轻松完成一个美丽的动画作用出来。

东西称号:cssanimate

网站地址:

AniCollection

CSS动画完成比JS简略许多,可是关于新手来说仍是许多代码的,并且还要不断的改写来核算动画作用,不过不要紧,接下来将为我们共享一个能够在线生成CSS动画的东西:,并且他们的动画数量许多,能满意一般需要求了。现在AniCollection上有许多不错的动画特效,比较适用于鼠标HOVER或点击事情,最主要的是能直接在线生成,比较简洁。

使用方法

STEP 1: 挑选你要的动画作用,点击“眼睛”图标。

STEP 2: 然后在下面经过下面TAG选项框,把CSS和HTML的代码仿制到你的网页上即可。

此外你还要以用jQuery来操控动画。

东西称号:AniCollection

官方网站: