深入理解CSS3动画:animation、transform、transition

在CSS3之前,动画主要都是以JavaScript或者Gif图片来实现,但是实现效果并不是很理想或者制作起来很麻烦,自有了CSS3之后很多动画几句代码即可实现,方便,快速,性能更好。

目录

  • animation
  • transform
  • transition

一、animation

我们通过一个简单的例子来理解:延迟1秒执行,从左0往右100px无限循环来回移动;

div {
    width: 80px;
    height: 80px;
    background: #f30;
    position: relative;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* 
    简写属性
    animation: test 1s linear 1s infinite alternate;
    */
}
@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}

image

【在线预览】

怎么样,是不是觉得so easy?对,就是这么简单!下面来详细讲解下这个代码:

语法:
@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}
keyframes name from 起始 to 结束
动画名称 等同0% 等同100%

当然也可以设置多个阶段,会有不同的效果哟,下面让我们来围着四周跑一圈:

@keyframes test {
    0% { left: 0; top: 0;}
    25% { left: 0; top: 50px;}
    50% { left: 50px; top: 50px;}
    75% { left: 50px; top: 0;}
    100% { left: 0; top: 0;}
}

image

【在线预览】

动画属性:
  • animation-name
    绑定到选择器的 keyframe 名称,简单来说就是名字。
animation-name: keyframename | none;
  • animation-duration
    完成动画所花费的时间,单位秒或毫秒,例:3s、3000ms。
animation-duration: time;
  • animation-timing-function
    规定动画的速度曲线,默认ease。
linear ease(默认) ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
从头到尾的速度相同 以低速开始,然后加快,在结束前变慢 动画以低速开始 动画以低速结束 动画以低速开始和结束 贝塞尔曲线

image

【在线预览】

  • animation-delay
    规定在动画开始之前的延迟,很好理解,就是延迟(等待)多长时间再执行动画(单位秒或毫秒)。
animation-delay: time;
  • animation-iteration-count
    规定动画播放次数,默认1;n(次数),infinite(无限)。
animation-iteration-count: n | infinite;
  • animation-direction
    规定是否应该轮流反向播放动画;normal(正常播放),alternate(交替播放),reverse(倒序播放),alternate-reverse(反向交替播放)。
animation-direction: normal | alternate | reverse | alternate-reverse;

image

【在线预览】

  • animation-fill-mode
    规定动画在播放之前或之后,其动画效果是否可见。
    forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    both:向前和向后填充模式都被应用。
animation-fill-mode : none | forwards | backwards | both;
  • animation-play-state
    规定动画正在运行还是暂停,paused(动画已暂停),running(动画正在播放)。
animation-play-state: paused | running;

image

【在线预览】

二、transform

transform可以用来设置元素的形状改变,主要有以下几种变形:

1.rotate - 旋转

旋转分为2D旋转和3D旋转;
正数为顺时针旋转,负数为逆时针旋转,单位:deg;

  • transform-origin
    旋转元素一般配合着transform-origin属性,transform-origin是用来设置旋转点的;
transfrom-origin:0px 0px; // 这里代表左上角0那个位置
transfrom-origin:center center; // 代表中心点,也是默认值
  • 2D旋转
transform: rotate(45deg); // 顺时针旋转45度

image

【在线预览】
另外,我们可以结合animation,然后就可以出现以下效果,就可以一直转圈圈:

@keyframes test{
    0%{ transform: rotate(0)}
    100%{ transform: rotate(360deg);}
}

image

【在线预览】

  • 3D旋转
transform: rotate3d(x,y,z,angle);

x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值。
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值。
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值。
angle:一个角度值,指定在3D空间旋转角度。

image

【在线预览】

  • scale - 缩放
transfrom:scale(x,y);

x:表示水平方向缩放的倍数。
y:表示垂直方向缩放的倍数,y为可选参数,不设置则表示x,y同时缩放相同倍数。

image

【在线预览】
当然为了效果看起来看流程,我们结合animation使用,就可以看到一个由小变大的效果:

@keyframes test{
    0%{ transform: scale(0.5)}
    100%{ transform: scale(1.5);}
}

image

【在线预览】

  • skew - 扭曲
transform: skew(x,y);

x:x轴(水平方向)倾斜
y:y轴(水平方向)倾斜

image

【在线预览】
这里我们设置的参数为:transform: skew(45deg,0)等同于transform: skew(45deg),也就是x轴顺时针45度。

  • translate - 移动

这个参数很简单,俗称:位移。

image

【在线预览】

三、transition

transition属性设置元素当过渡效果,CSS过渡目前是比较常用的,它一共有4个子属性:

  • transition-property: 过渡属性,默认值:all;
  • transition-duration: 过渡持续时间,默认值:0s;
  • transiton-timing-function: 过渡函数,默认值:ease;
  • transition-delay: 过渡延迟时间,默认值:0s;
div {
    width: 80px;
    height: 80px;
    background: #be2323;
    transition-duration: 2s;
    transition-property: width;
    transition-timing-function: linear;
    transition-delay: 0s;
    /* 简写属性
    transition: width 2s linear 0s;
    */
}
div:hover{
    width: 300px;
}

image

【在线预览】
4个子属性和文章第一大点:animation相同,认真看下来的朋友,都应该了解用法了,这里就不再做详述了。

总结

  • 以上为CSS3几种动画方式,几大属性都可以相互结合使用,比如说transform配合transition过度,就会把本身变化缺失的过程补充完整,从而得到一个完善、流畅的动画效果。
  • 当然学会了CSS3动画,不能把JS给遗忘了,CSS3+JS是可以写出很多酷炫效果及提升用户体验的,比如基本的点击播放动画,暂停动画,图片逐渐方法等等,就不一一说了,前端注重用户体验,相互的合理使用,用户体验是能做到极大的提升的。
  • 更多的东西大家就自己去探索了,多读、多写,就会有提升!
  • 大家如果有什么好的想法或见解,欢迎评论区沟通,谢谢!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容