搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

CSS3动画

web前端自学平台 2017-10-31

一、CSS3变形-transform

CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。在css3中通过transform属性,来实现transform功能

如何使用transform功能

  • transform:功能

  • -ms-transform:功能/*IE 9*/

  • -moz-transform:功能/*火狐*/

  • -webkit-transform:功能/*chrome*/

  • -o-transform:功能/*Opera*/

scale缩放转换,使用方法:

transform:scale(值),他的值是指定的缩放倍率,比如0.5就是缩放到50%,1就是100%,1.5就是放大150%

  • scale(x,y) 使元素X轴和Y轴同时缩放

  • scaleX(x) 使元素仅X轴缩放

  • scaleY(y) 使元素仅Y轴缩放

rotate旋转,在参数中规定角度,使用方法如下:

  • -ms-transform:rotate(角度);/*IE 9*/

  • -moz-transform:rotate(角度);/*火狐*/

  • -webkit-transform:rotate(角度);/*chrome*/

  • -o-transform:rotate(角度);/*Opera*/

    CSS3动画

translate移动,使用方法:transform:tralslate(值),他的值是指定移动的距离  

  • translateX(x)  仅水平方向移动(x轴移动)

  • translateY(y)  仅垂直方向移动(y轴移动) 

  • tanslate(x,y)  水平方向和垂直方向同时移动(X轴和Y轴同时移动),当只有一个参数,只在水平方向上移动 

    CSS3动画

skew倾斜,使用方法:transform:skew(值) 他的值是角度

 多种方法连写:transform:方法1,方法2,方法3

CSS3动画

transform-origin 设置变形的中心点 

     如:transform-origin:left  top;transform-origin:20px 50px;

二、CSS过渡-transition

如何使用transition

  1. transition:语法;

  2. -moz-transition:语法;/*火狐*/

  3. -webkit-transition:语法;/*chrome*/

  4. -o-transition:语法;/*Opera*/

transition:过渡属性  时间  运动方式  动画延迟

  1. transition-property  设置过渡的属性,比如:width  height  background-color(是在宽度上做动画还是在高度上亦或是背景上)

  2. transition-duration  设置过渡的时间,比如:1s  500ms

  3. transition-time-function  设置过渡的运动方式

  • linear  匀速

  • ease  开始和结束慢速

  • ease-in  开始时慢速

  • ease-out  结束时慢速

  • ease-in-out 开始和结束时慢速

transition-delay  设置动画的延迟

CSS3动画

使用transition和Animations的区别:

  • transition只能通过指定属性的开始值与结束值,然后通过两属性值之间进行平滑过渡的方式来实现动画,所以transition不能实现复杂的动画效果。

  • animation功能是通过关键帧以及某个关键帧中的属性值来实现更为复杂的动画效果。

三、CSS3 animation动画:通过改变元素的属性值来实现动画效果(直接进行动画,不需要触发)

animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性

如:animation:moving 1s ease 1s 6 alternate forwards;

  1. @keyframes 定义关键帧动画  

        如:@keyframes  动画名{

            from{属性:属性值}

            to{属性:属性值}

                        或者是0%~100%

        }

  1. animation-name  动画名称

  2. animation-duration  动画时间

  3. animation-timing-function 动画曲线

  • linear  匀速

  • ease  开始和结束慢速

  • ease-in  开始时慢速

  • ease-out  结束时慢速

  • ease-in-out 开始和结束时慢速

  • steps 动画步数

  4、animation-delay 动画延迟

  5、animation-iteration-count 动画播放次数 n|infinite

  6、animation-direction:normal 默认动画结束不返回/alternate 动画结束后返回

  7、animation-play-state 动画状态

  • paused 停止

  • running 运动

 8、animation-fill-mode  动画前后的状态

  • none 不改变默认行为

  • forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

  •  backwards 在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

CSS3动画

CSS3动画

四、CSS动画-多列

  1. 在CSS3中,可以创建多列来对文本或者区域进行布局

  2. 属性

  • column-count:分列的数量

  • column-gap:每列之间的间距

  • column-rule:每一列间隔中间的线,以及线的颜色都可以设置

  • column-width:每一列的宽度

实例

CSS3动画

CSS3动画

使用CSS3多列实现瀑布流效果

效果图:

CSS3动画

css样式

CSS3动画

html结构

CSS3动画

五、3D转换

CSS3动画

CSS3动画

CSS3动画CSS3动画

CSS3动画

CSS3动画


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《CSS3动画》的版权归原作者「web前端自学平台」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端自学平台微信公众号

web前端自学平台微信公众号:gh_d79ea4fb97f3

web前端自学平台

手机扫描上方二维码即可关注web前端自学平台微信公众号

web前端自学平台最新文章

精品公众号随机推荐