css 动画(二) transition 过渡 & animation 动画
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
- translate:平移;是transform的一个属性;
- transform:变形;是一个静态属性,可以改变元素的形状或位置,做出 2d 或 3d 效果;
- transition:过渡,转变;使 css 属性值在一段时间内平滑的变化,需要有触发条件(如 hover 等),是 animation 的简化版;
- animation:动画;可以设置多帧效果,然后把它们组合变换,按动画效果展示出来;
transition
过渡,右有四个子属性:
- transition-property:过渡属性,默认为 all;
- transition-duration:过渡效果花费的时间,默认值是0,以秒或毫秒计,不能为负值;
- transition-timing-function:定义过渡效果的速度,默认值 ease(开始和结束慢,中间快),可以设置 linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似,开始和结束慢,但是中间更快)、贝塞尔曲线;
- transition-delay:定义过渡延时时间;默认值为0(直接开始),以秒或毫秒计,可为负值;
- transition的四个子属性可以缩写,用空格隔开;其中 duration(过渡时间)和 delay(延时时间)两个值都是时间,当两个值都存在时,第一个是 duration(过渡时间),第二个是 delay(延时时间);如果只存在1个时间,那就是 duration(过渡时间),delay(延时时间)默认为0;
- transition可以同时设置多个属性的过渡效果,用逗号隔开;
- transition需要有触发条件,animation 则不需要;
建议看 大神的这篇博文,讲的比较详细,里面还有关于 API 的东西;
想整个 hover 效果的,弄了好久,又是 iframe(在 jsrun.cn 网站上做出效果,然后分享,自动生成 iframe 链接),又是 js 的,都没弄出来,好像是没有 js 权限,懒得整了。
<style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
margin: 100px;
height: 300px;
border: 10px solid #f0f;
background: #0ff;
position: relative;
cursor: pointer;
} .test {
width: 100px;
height: 100px;
background: #f60;
position: absolute;
left: 30px;
top: 30px;
transition: width 1s ease-in-out 2s,
height 2s ease-in,
background 3s linear,
left .5s ease-out,
top 1.5s ease-in;
} .wrapper:hover .test {
width: 150px;
height: 50px;
background: #ff0;
left: 200px;
top: 150px;
}
</style>
<div class="wrapper">
<div class="test"></div>
</div>
animation
动画,一种样式到另一种样式的动画效果,可以改变任意多的次数任意多的样式,用百分比来规定发生的时间,或关键词"from"和"to",等同于"0%"和"100%";
- 先用 @keyframes 定义动画的名称,然后根据时间轴来写不同的动画效果;
- 在需要做动画效果的元素身上设置 animation 属性,并绑定动画名称,然后设置动画持续时间、时间函数、延时、播放次数、播放方向、播放状态、填充模式等;
@keyframes:
- @keyframes,声明动画名称;时间轴的百分比顺序可以随便排列,最后浏览器都是从0%到100%按顺序解析,0%不可以省略百分号;
- 设置小于0%或者大于100%的百分比是无效的;
- 如果0%或100%没有写动画效果的属性,那么将应用元素默认的属性值;
- 如果多个 @keyframes 的名称相同,那么只有最后一个有效,如果最后一个 @keyframes 没有写任何属性,那么动画效果就是没有的(不管前面相同名称的 @keyframes)
animation-duration
动画执行完成所需时间,默认为0(没有动画效果),不能为负值,否则将没有动画效果;
animation-timing-function
类似与transition的时间函数,默认值ease(开始和结束慢,中间快),可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似,开始和结束慢,但是中间更快)、贝塞尔曲线;
animation-delay
定义延时多长时间后开始播放动画;可以设置负值(从提前多少秒的位置开始播放动画);
animation-interation-count
循环次数,默认值是1,可以设置整数或小数,不能是0以及负值,也可以设置关键词"infinite"(无限次数);
animation-direction
默认值 normal(正向),可设置 reverse(反向)、alternate(在奇数次正向,偶数次反向;也就是说动画顺序是0%---100%---0%---100%---...)、alternate-reverse(在奇数次反向,偶数次正向,也就是说动画顺序是100%---0%---100%---0%---...);
safari 浏览器不支持 alternate 和 alternate-revers 属性;
animation-fill-mode
定义动画开始帧和结束帧的动作;默认值是 none(动画结束后,回归到初始状态,不是0%,是元素本身属性);
可设置 forwards(元素停留在动画结束的状态,这个值并不一定是100%的位置,因为可能是反向播放,也可能播放次数是小数);
可设置 backwards(元素停留在动画开始的状态,这个值不一定是0%的位置,因为延迟开始的时间可能是负值);
可设置 both,意思是同时具有 forwards 和 backwards 的效果;
animation-play-state
设置动画运行(running)或者暂停(paused);
建议看 大神的这篇博文,讲的比较详细,里面还有关于API的东西;
六面体旋转:
<style type="text/css">
* {
padding: 0;
margin: 0;
} li {
list-style: none;
} .wrapper {
width: 600px;
height: 600px;
margin: 0 auto;
} .demo-container {
position: relative;
width: 600px;
height: 600px;
perspective: 1800px;
/*定义视距*/
} @keyframes bigMove {
0% {
transform: rotateX(-25deg)rotateY(-45deg);
} 20% {
transform: rotateX(-25deg)rotateY(135deg);
} 100% {
transform: rotateX(-25deg)rotateY(135deg);
}
} @keyframes smallMove {
0% {
transform: rotateX(-25deg)rotateY(-45deg);
} 20% {
transform: rotateX(-25deg)rotateY(-405deg);
} 100% {
transform: rotateX(-25deg)rotateY(-405deg);
}
} .box {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
transform: rotateX(-25deg)rotateY(-45deg);
transform-style: preserve-3d;
animation: bigMove 5s infinite ease-in-out 2s;
} .box li {
width: 300px;
height: 300px;
box-shadow: 0 0 5px #98b5e0;
text-align: center;
font: 28px/300px "microsoft yahei";
color: #fff;
position: absolute;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(165, 193, 235, .5) 0%, rgba(134, 167, 218, .5) 50%);
} .box .front {
transform: translateZ(150px);
} .box .back {
transform: translateZ(-150px)rotateY(180deg);
} .box .left {
transform: translateX(-150px)rotateY(-90deg);
} .box .right {
transform: translateX(150px)rotateY(90deg);
} .box .top {
transform: translateY(-150px)rotateX(90deg);
} .box .bottom {
transform: translateY(150px)rotateX(-90deg);
} /*inner*/
.inner {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
transform-style: preserve-3d;
transform: rotateX(-25deg)rotateY(-45deg);
animation: smallMove 5s infinite ease-in-out 2s;
} .inner li {
width: 100px;
height: 100px;
box-shadow: 0 0 2px #0b65ea;
text-align: center;
font: 28px/100px "microsoft yahei";
color: #fff;
position: absolute;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(84, 153, 218, .5) 0%, rgba(73, 130, 215, .5) 50%);
} .inner .front {
transform: translateZ(50px);
} .inner .back {
transform: translateZ(-50px)rotateY(180deg);
} .inner .left {
transform: translateX(-50px)rotateY(-90deg);
} .inner .right {
transform: translateX(50px)rotateY(90deg);
} .inner .top {
transform: translateY(-50px)rotateX(90deg);
} .inner .bottom {
transform: translateY(50px)rotateX(-90deg);
}
</style>
<div class="wrapper">
<div class="demo-container">
<ul class="box">
<li class="front"></li>
<li class="back"></li>
<li class="left"></li>
<li class="right"></li>
<li class="top"></li>
<li class="bottom"></li>
</ul>
<ul class="inner">
<li class="front"></li>
<li class="back"></li>
<li class="left"></li>
<li class="right"></li>
<li class="top"></li>
<li class="bottom"></li>
</ul>
</div>
</div>
球旋转:
<style type="text/css">
* {
padding: 0;
margin: 0;
} li {
list-style: none;
} body {
background: #000;
} .wrapper {
width: 600px;
height: 600px;
margin: 0 auto;
perspective: 1800px;
} .demo-container {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
} @keyframes boxXuanzhuan {
0% {
transform: rotateX(50deg)rotateZ(170deg)rotateY(50deg);
} 30% {
transform: rotateY(50deg)rotateX(170deg)rotateZ(30deg);
} 60% {
transform: rotateZ(50deg)rotateY(170deg)rotateX(95deg);
} 100% {
transform: rotateX(50deg)rotateZ(170deg)rotateY(66deg);
}
} .box {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
/*transition: all 3s;*/
/*transform: rotateX(-134deg)rotateY(64deg);*/
transform-style: preserve-3d;
animation: boxXuanzhuan 30s infinite ease alternate;
} @keyframes liXuanZhuan {
0% {
background: #acf91a;
color: #00B700;
border-radius: 50%;
width: 50px;
height: 30px;
box-shadow: 0 0 10px #adff2f;
} 30% {
background: #f9641a;
color: #f71af9;
border-radius: 20%;
width: 60px;
height: 50px;
box-shadow: 0 0 10px #818217;
} 70% {
background: #6932bf;
color: #FFFFFF;
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow: 0 0 10px #adff2f;
} 100% {
background: #acf91a;
color: #00B700;
border-radius: 10%;
width: 50px;
height: 30px;
box-shadow: 0 0 10px #adff2f;
}
} .box li {
background: #00FF99;
position: absolute;
width: 60px;
height: 60px;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -30px;
font: 22px/60px "microsoft yahei";
color: #F08787;
border-radius: 50%;
text-align: center;
animation: liXuanZhuan 20s infinite ease alternate;
} .item1 {
transform: translateZ(250px);
} .item2 {
transform: translateZ(-250px);
} .item3 {
transform: rotateY(90deg)translateZ(250px);
} .item4 {
transform: rotateY(-90deg)translateZ(250px);
} .item5 {
transform: rotateY(45deg)translateZ(-250px);
} .item6 {
transform: rotateY(-45deg)translateZ(-250px);
} .item7 {
transform: rotateY(45deg)translateZ(250px);
} .item8 {
transform: rotateY(-45deg)translateZ(250px);
} .item9 {
transform: rotateY(-45deg)rotateX(45deg)translateZ(250px);
} .item10 {
transform: rotateY(-135deg)rotateX(45deg)translateZ(250px);
} .item11 {
transform: rotateY(45deg)rotateX(45deg)translateZ(250px);
} .item12 {
transform: rotateY(135deg)rotateX(45deg)translateZ(250px);
} .item13 {
transform: rotateY(-45deg)rotateX(-45deg)translateZ(250px);
} .item14 {
transform: rotateY(-135deg)rotateX(-45deg)translateZ(250px);
} .item15 {
transform: rotateY(45deg)rotateX(-45deg)translateZ(250px);
} .item16 {
transform: rotateY(135deg)rotateX(-45deg)translateZ(250px);
} .item17 {
transform: rotateX(90deg)translateZ(250px);
} .item18 {
transform: rotateX(-90deg)translateZ(250px);
}
</style>
<div class="wrapper">
<div class="demo-container">
<ul class="box">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
<li class="item16"></li>
<li class="item17"></li>
<li class="item18"></li>
</ul>
</div>
</div>
css 动画(二) transition 过渡 & animation 动画的更多相关文章
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- transition和animation动画简介
本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不 ...
- css3动画入门transition、animation
css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...
- css3动画:transition和animation
概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- 30分钟玩转css3动画, transition,animation
其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...
- android动画介绍之 自定义Animation动画实现qq抖一抖效果
昨天我们介绍了Animation的基本用法.小伙伴们了解的怎么样了?如果还没有了解过Animation的小伙伴可以看看这篇博客 android动画介绍--Animation 实现loading动画效果 ...
- CSS(十二).transition的应用之CSS中心扩散
实现 css中心向两边扩散的两个核心 1.hover 之前的 垂直居中 2.文字置于最顶层 顺道来讲讲hover 伪元素是不支持 hover 的,不过我们可以给普通的 tag 标签添加 hover 以 ...
- CSS总结六:动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
随机推荐
- LayUI使用弹窗重载父级数据表格的两种方法
参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on(" ...
- mybatis设置Map空值返回
mybatis时,设置Map返回,当值为空时属性也会没有 在application.properties中加入下面配置,将会解决这个问题. #当查询数据为空时字段返回为null,不加这个查询数据为空时 ...
- nginx -- 设置单点登录 sso oidc oauth
这个开源项目可以找到你想要的: https://github.com/vouch/vouch-proxy
- vue+Typescript初级入门
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析
1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...
- 10--STL无序容器(Unordered Containers)
一:无序容器简介 Unordered Containers也是一种关联式容器.其中元素是分散,没有定性的排列(不是图中那样松散).其中元素可能在某一次操作后改变原来的位置. 哈希表的链地址法,更能表现 ...
- 123457---com.threeObj.Baobaoshizi01--- 宝宝识字01
com.threeObj.Baobaoshizi01--- 宝宝识字01
- Day7作业:选课系统
这周的作业有点糙,迁就看吧,给大家点思路: readme: 需要安装模块: prettytable 测试帐号: 1.后台管理:admin/admin 只设定了这个后台管理帐号,没有写到数据库中 2.学 ...
- (三)UML之类图关系
泛化(generalization):表示is-a的关系,是对象之间耦合度最大的一种关系,子类继承父类的所有细节.直接使用语言中的继承表达.在类图中使用带三角箭头的实线表示,箭头从子类指向父类.如下图 ...
- iOS的推送证书过期的处理
1.删除MAC上钥匙串访问中对应的推送证书.<根据过期日期看> 2.登录苹果开发者后台,revoke删除已过期推送证书(貌似会自己消失不用删除,具体记不清了...),然后为对应App ID ...