css 入场动画_进入css3动画世界(一)

其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷。

分类

目前我接触到的css3动画有2类:一种是transition的,另一种是@keyframes的。

两者的区别就是,transition的动画表达是从一种状态到另一种状态,而@keyframes更加灵活,一个动画可以在不同进度表现成不同的状态。

当然,如果从操作的对象进行分类(就我目前接触的而言),我想可以分3种,一种是html元素,一种是svg的,还有就是sprites的。

大家可能见过一个css3动画是关于一个会动的大象

大象的身体是由很多个`div`构成的,我们可以给每一个div都加上动画;

另一种是svg,美工用AI给你做一个图,图内有若干个已经命名的图层,图内的元素相应编好组,输出svg后,拖进编辑器,你就可以看到id名和图层命名相同的标签,看到编组后的标签,这时候你会发现,svg的元素和上面例子的div差不多,而且形状还不用自己想出来,美工已经帮你做好了,剩下来的就是你要给它加动画了;

还有一种sprites,美工把整个动画都用AE输出了,然后你只需要把动画扔到PS,把全部帧扔在一起做出一个长图,再通过变换background-position的属性,就可以做出动画效果了。

## 入门

> 最佳的入门选择就是`transition`。

transition意思是过渡,可以理解成从一种状态变成另一种状态。

这些状态包括很多,我自己没整理出来,暂时引用一下别人整理到的Transition 所支持的css属性.

像transition这个属性,我们经常用hover与它搭配,写好hover前后的变化,加上transition属性就可以让他们过渡了。

效果:

源码:

改变宽
改变高
改变背景
改变字体
改变矩形角
平移
改变阴影
旋转
缩放

.shape{

width: 100px;

height: 100px;

background: #777;

float: left;

margin-right: 3px;

color: #fff;

line-height: 100px;

text-align: center;

transition: 0.5s;

border: 1px solid #555;

}

.width:hover{

width: 200px;

}

.height:hover{

height: 200px;

}

.bg:hover{

background: #000;

}

.font:hover{

font-size: 20px;

color: yellow;

}

.bd-r:hover{

border-radius: 50px;

}

.translate:hover{

transform: translate(0,20px);

}

.shadow:hover{

box-shadow: 0px 5px 5px #000;

}

.rotate:hover{

transform: rotate(30deg);

}

.scale:hover{

transform: scale(1.5,1.5);

}

进阶

其实也算不上进阶,@keyframes这个玩意大家稍微花点时间就能很轻易的学会了。

其实 @keyframes 的效果在特定条件下和 transition 一样,就是只定义了 0%和100% 或者 from和to 状态下的 @keyframes 和 transition 一样。

源码:(这个svg图是我用AI画出来的,感兴趣的可以自己画一个)

#change{

display: block;

height: 100px;

width: 50px;

background: #999;

transition: 0.3s;

}

#shape{

width: 600px;

height: 200px;

margin-left: 50%;

position: relative;

left: -300px;

}

@keyframes rotate{

0%{

transform: rotate(0);

}

100%{

transform: rotate(360deg);

}

}

.rotate{

/*transition: 0.5s;*/

transform-origin: 30px 30px;

animation: rotate 10s linear infinite;

}

而@keyframes灵活的是,它还能定义中间的状态,可以加个25%,50%,75%……

开篇我就写这些,感兴趣的可以继续看下一篇,以后会更新。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值