–探索CSS3动画、过渡

###让我们一起来探索 Transiton(过渡), Transform(变化) , Animation(动画)属性吧!


###Transiton(过渡) transition 属性简写: transition: property(过渡的css属性) duration(持续时间) timing-function(过渡类型) delay(延迟过渡时间);

默认值: transition:all 0 ease 0

详细属性值: transition-property : //设置过渡效果的 CSS 属性的名称 transition-duration: //指定这个过渡的持续时间 transition-delay: //延迟过渡时间 transition-timing-function: 指定过渡类型,linear //线性过度,ease-in //由慢到快,ease-out //由快到慢,ease-in-out //由慢到快在到慢,cubic-bezier//贝塞尔曲线

DEMO: 鼠标移动到div上出发hover事件出发背景的过渡动画


###Transform(变化) transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

默认值 transform: skew(35deg) scale(1, 0.5) rotate(45deg) translate(10px, 20px); skew(倾斜) scale(缩放) rotate(旋转) translate(偏移) 元素变化过渡的起始位置 语法:transform-origin: x-axis y-axis z-axis; 值: transform-origin:top left || 0% 0%//设置为左上点 参考:transform-orgin属性

详细属性: *translate(x,y) 位置偏移 translateX(x) 沿X轴偏移 translateY(y) 沿Y轴偏移*

*scale(x,y) 缩放 scaleX(x) 沿 X 轴的值来进行缩放 scaleY(y) 沿 Y 轴的值来进行缩放*

rotate(angle) 定义 2D 旋转,在参数中规定角度

*skew(x-angle,y-angle) 倾斜 skewX(angle) 定义沿着 X 轴倾斜 skewY(angle) 定义沿着 Y 轴倾斜*

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 矩阵

*translate3d(x,y,z) 定义 3D translateZ(z) 定义 3D ,只是用 Z 轴的值*

*scale3d(x,y,z) 定义 3D 缩放 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放*

*rotate3d(x,y,z,angle) 定义 3D 旋转 rotateX(angle) 定义沿着 X 轴的 3D 旋转 rotateY(angle) 定义沿着 Y 轴的 3D 旋转 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转*

**DEMO: 鼠标移入触发变化并形成过渡效果

**


###Animation(动画) 简写: animation: name(关键帧名) duration(动画时长) timing-function(动画类型) delay(延迟时间) iteration-count(动画播放次数)

详细属性 animation-name //指定要绑定到选择器的关键帧的名称 animation-duration //动画指定需要多少秒或毫秒完成 animation-timing-function:linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)//设置动画将如何完成一个周期 animation-delay //设置动画在启动前的延迟间隔 animation-iteration-count : Number||infinite(循环) //定义动画的播放次数 animation-direction //指定是否应该轮流反向播放动画 animation-fill-mode //规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式 animation-play-state //指定动画是否正在运行或已暂停 initial //设置属性为其默认值 inherit //从父元素继承属性

###@keyframes 关键帧 写法: inCSS: … @keyframes name(关键帧名){ 0% { padding: 0; } 50% { padding: 20px; } 100% { padding: 100px; } } 或者 @keyframes name(关键帧名){ form { padding: 0; } to { padding: 100px; } }

兼容性写法 @keyframes mymove{} @-moz-keyframes mymove / Firefox /{} @-webkit-keyframes mymove / Safari 和 Chrome /{} @-o-keyframes mymove / Opera /{}

DEMO: 快乐的制作自己的呼吸灯效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

CSS布局(三) 布局模型

布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) ...

34460
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

310100
来自专栏木子昭的博客

<jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

在前端页面的布局过程中,作者遇到了,这样一个问题 当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时...

299100
来自专栏cnblogs

Css3新特性应用之形状

一、自适应椭圆 * border-radius特性:     * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽...

18690
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

13140
来自专栏进击的君君的前端之路

CSS常见样式(一)

31230
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

33060
来自专栏cnblogs

Css3新特性总结之边框与背景(一)

本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。 一、半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);...

18580
来自专栏coding for love

CSS进阶11-表格table

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

47120
来自专栏上善若水

018android初级篇之自定义圆形进度条

项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。

13150

扫码关注云+社区

领取腾讯云代金券