【CSS3】transition过渡和animation动画

本文介绍了CSS3中的transition和animation,讲解了transition的属性、触发方式及其局限性,然后详细阐述了animation的使用,包括@keyframes的创建和animation属性的各个组成部分。通过实例展示了CSS3动画在实现复杂效果时的优势,并提到了目标伪类选择器和文本阴影的应用。
摘要由CSDN通过智能技术生成

写在前面的话:

之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折腾了半天啊,最后好在是解决了,我可是google了很多,看了很多stackoverflow上的英文才弄明白,==我是不是有点傻……(如果有感兴趣的同学想要尝试用Canvas让图片围绕中心点旋转,可以私信我,我给你发代码呀,哈哈哈)但是带我的师父给我说,你不觉着这个实现起来有些繁琐吗,你再想想,让转盘旋转还能用什么方法?CSS3动画可以不可以?所以,我就开始研究CSS3动画,用CSS3来让图片旋转,真的好简单啊,简单到要哭了。可是,郁闷的是,虽然那段时间经常在用CSS3动画,可是又几个月过去了,竟然变得生疏了。所以,内推之前又开始复习了一遍,多总结。

正文开始

本来只想总结animation,但是转念一想,该先看看transition的,毕竟都跟动画有关系吼。那么先来说一下transition。

一、transition

CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑。

transition的属性

这里写图片描述

属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以如下:

img{
    height:15px;
    width:15px;
    transition: 1s 1s height ease;/*合在一起*/
}
或者:
img{
    height:15px;
    width: 15px;
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;/*属性分开写*/
}
img:hover{
    height: 450px;
    width: 450px;
}

因为过渡所需要时间与过渡延迟时间的单位都是秒,所以在合起来写transition的属性的时候,第一个time会解析为transiton-duration,第二个解析为transition-delay。所以,可以给transition一个速记法

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;

属性详解

transition-property

不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。完整列表,见这个列表 ,具体效果,见 这个页面

transition-duration

指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果。

transiton-timing-function

过渡函数,有如下几种:

liner :匀速
ease-in:减速
ease-out:加速
ease-in-out:先加速再减速
cubic-bezier:三次贝塞尔曲线,可以定制 <

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值