Css3新特性应用之过渡与动画
目录
一、缓动效果
- 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等
- 还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点
- Css中只支持一条贝塞尔曲的运动,不能连续多段
- 对cubic-beizer中控制锚点的水平坐标与垂直坐标互换,就可以得到任何调整函数的反向版本
cubic-beizer(.1,.25,1,.25)
是ease的反向调整函数- 水平坐标只能在0~1的范围内,因为水平坐标表示的是时间
- 垂直坐标可以超过此范围,表示为运动距离
- 示例代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes bounce{
60%, 80%, to{
transform: translateY(350px);
animation-timing-function: ease-out; /*加速*/
}
70%{ transform: translateY(250px); }
90%{ transform: translateY(300px) }
}
.ball{
display: inline-block;
animation: bounce 3s ease-in; /*减速*/
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
@keyframes bounceEase{
60%, 80%, to{
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300); }
90% { transform: translateY(350px); }
}
.ball02{
display: inline-block;
animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/
margin-left: 60px;
width: 20px;
height: 20px;
border-radius: 50%;
background: gray;
}
</style>
</head>
<body>
<div class="ball">
</div>
<div class="ball02"></div>
</body>
- 利用过渡(transition)实现
- 但需要注意transition-property默认值为all,所有可以过渡的属性都会被过滤
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:not(:focus) + .callout{
transform: scale(0);
transition-duration: .25s; /*覆盖默认的.5s时间*/
transition-property: transform; /*只过渡transform属性,不过滤背景等其他属性*/
}
.callout{
transition: .5s cubic-bezier(.25,.1,.3,1.5); /*光标输出input时,有动画*/
transition-property: transform;/*只过渡transform属性,不过滤背景等其他属性*/
}
input{
display: block;
}
.callout{
background: #fed;
position: absolute;
max-width: 14em;
padding: .6em, .8em;
}
</style>
</head>
<body>
<label>
Your name:
<input type="text" id="username" />
<span class="callout">Only letters,number,underscores and hyphens allowed</span>
</label>
</body>
二、逐帧动画
- animation-timing-function中的steps函数,主要用他实现帧动画,他是一个阶跃函数,共两个参数
- 参数一:一个数字,代表时间函数中的间隔数量(必须为正数)
- timing-function是作用于每两个关键帧之间,而不是整个动画过程
- 参数二:接受start和end两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认end,step-start和step-end分别是steps(1,start)和steps(1,end)的简写
- 参数一:一个数字,代表时间函数中的间隔数量(必须为正数)
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes loader{
to{ background-position: -128px 0; }
}
.wrap{
background: url("../img/frameAnimate.png") no-repeat;
width: 32px;
height: 50px;
background-position: 0px 0px;
animation: loader 1s infinite steps(4);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
三、闪烁效果
实现两种闪烁效果,一是平滑闪烁,另一种是帧闪烁(更接近于现实)
- 平滑闪烁
主要是利用animation-iteration-count和animation-direction两个属性实现。
1.animation-iteration-count:表示动画的执行次数
2.animation-direction:表示动画是否应该轮流反向播放动画,如果值为alternate时,animation-iteration-count必须是一个偶数,因为是奇数正常播放,偶数反向播放
- 代码如下:
<style>
@keyframes blink-smooth{
to{ color: transparent; }
}
.wrap{
animation: 1s blink-smooth;
animation-iteration-count: 6;
animation-direction: alternate;
}
</style>
<div class="wrap">我是平滑的显示和隐藏三次</div>
- 帧闪烁
利用animation-timing-function属性的steps实现,因steps指定两个关键帧之间分成几个片段执行动画
1.animation-timing-function: steps(1),然后配合上动画在50%实现一个透明即可
- 代码如下:
<style>
@keyframes blink-smooth02{
50% { color: transparent; }
}
.wrap02{
animation: 1s blink-smooth02;
animation-iteration-count: 3;
animation-timing-function: steps(1);
}
</style>
<div class="wrap">我是逐帧的显示和隐藏三次</div>
四、打字效果(只支持单行英文)
需要利用用下特性:
1.等宽字体,然后加上ch这个单位,ch是表示'0'这个字符的宽度.
2.使用动画让元素宽度从0变到最大宽度。
3.利用steps(1)让每个关键帧的地方产生动画 代码如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes typing {
from{ width: 0; }
}
@keyframes cart{
50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现*/
}
.wrap{
width: 14ch;
animation: typing 8s steps(14) , cart 1s steps(1) infinite;
white-space: nowrap;
overflow: hidden;
border-right:1px solid transparent;
font-family: Courier New, Courier, monospace;
}
</style>
</head>
<body>
<div class="wrap">Css is awesome</div>
</body>
五、状态平滑的动画
利用animation-play-state属性实现动画的暂停和播放功能,以及改变背景的定位。示例代码如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes mic{
to{ background-position: 100% 0; }
}
.wrap{
background: url("../img/cat.png");
background-repeat: no-repeat;
background-size: auto 100%;
width: 100px;
height: 200px;
animation: mic 5s linear infinite alternate; /*直线运动,永不停止,偶数反向运动*/
animation-play-state: paused;
}
.wrap:hover, .wrap:active{
animation-play-state: running;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
六、沿环型路径平移的动画
这点很重要,transform中的变形函数(如:rotate,transflate等)都是会影响元素整个坐标系统。也就是说rotate旋转的时候是旋转的整个坐标系统。这是实现用一个元素沿环弄路径平移的基础。原理图如下:
- 两个元素方案,transform-origin + rotate可以实现,但html结构需要两个元素,如下代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes spin{
to{ transform: rotate(1turn); } /*顺时针旋转360*/
}
@keyframes spin-reverse{
from{ transform: rotate(1turn); } /*逆时针旋转360*/
}
.wrap{
width: 300px;
height: 300px;
background: yellow;
border-radius: 50%;
overflow: hidden;
padding: 20px; /*加大窗口的宽和高,利用背景从边框开始的原理,让运动图片与边框有一定的距离*/
}
.spin{
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin: 0px auto; /*运行元素居中*/
animation: spin 5s infinite linear;
transform-origin: 50% 150px; /*定位变换的原点*/
}
.spin > img{
width: inherit;
height: inherit;
animation: spin-reverse 5s infinite linear;
--animation: inherit;
--animation-direction: reverse; /*由于动画会控制整个元素+元素内部的元素一起动画,所以内部的元素要反向动画*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="spin">
<img src="../img/cat.png" alt="" />
</div>
</div>
</body>
说明:
1..spin的transform-origin: 50% 150px;是进行变换原点的定位;
2.由于需要实现spin环形运动,transform本质特性是元素+元素内部子元素都要随着变换,因此需要对img元素进行反向变形
3.实现两种反向变形的方式:A:写一个反向变形动画;B:继承父级的动画,用animation-direction指定位reverse进行反向。
- 单个元素方案,利用translate和rotate(多次利用),html结构只有一层,代码如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*反向旋转必须有,不然位置不对*/
@keyframes spinc{
from{
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
translate(50%, 50%)
rotate(1turn)
translate(-50%, -50%); /*前三个第一轮旋转,后三个第二轮旋转*/
}
to{
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px)
translate(50%, 50%)
rotate(0turn)
translate(-50%, -50%);
}
}
.wrap{
width: 300px;
height: 300px;
background: yellow;
border-radius: 50%;
overflow: hidden;
padding: 20px; /*加大窗口的宽和高,利用背景从边框开始的原理,让运动图片与边框有一定的距离*/
}
.avatar{
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin: 0px auto; /*运行元素居中*/
display: block;
animation: spinc 5s linear infinite;
}
</style>
</head>
<body>
<div class="wrap">
<img src="../img/cat.png" alt="" class="avatar" />
</div>
</body>
说明:
1.一个img然后即要沿环型路径运动,本身又不能随着旋转,那么就需要两组位移和旋转
2.第一组位移 + 旋转,实现img元素沿环形路径运动
translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
3.第二组位移 + 旋转,实现img元素本身定位不动
translate(50%, 50%)
rotate(1turn)
translate(-50%, -50%)
- 两个元素方案主单个元素方案效果图如下:
Css3新特性应用之过渡与动画的更多相关文章
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- Shell的学习就从重装系统开始吧
小标题:与Fedora的爱恨情仇 干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手 起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...
- 在linux中如何调试C语言程序
在Linux下面可以使用下面几种形式对C语言进行调试: 1 gdb gdb program 这是最原始的调试方法,若非熟悉命令行,这种方式其实是比较麿人的.有兴趣的可以参考一些我之前的博文.http: ...
- POJ3187 Backward Digit Sums
给出杨辉三角的顶点值,求底边各个数的值.直接DFS就好了 #include<iostream> #include<cstdio> #include<cstring> ...
- php表单(2)
学习php表单 主要是想知道 前端通过submit之后 后端是如何进行操作的.现在实现一个效果:点击submit,输入框的信息不会被刷掉:刷新页面,输入框的信息被刷掉(index.php). < ...
- ASP.NET MVC IOC 之Ninject攻略
ASP.NET MVC IOC 之Ninject攻略 一.为什么要使用Ninject? 很多其它类型的IOC容器过于依赖配置文件,老是配置,总感觉有点不爽,而且要使用assembly-qualifie ...
- Go语言搭建自己的博客
我是如何用Go语言搭建自己的博客的 前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所 ...
- vj1010:高精乘+细心模拟
这题的话思路挺简单的,主要是打一个高精乘,然后考虑一些细节的东西 码得挺少时间的,但是调错调了很久... 讲一下思路吧: 就是读入的时候,先把小数点去掉,mark一下小数点的位置 去掉小数点之后也就进 ...
- c#QQ连连看辅助
近来无事,写个连连看辅助,下面先说下思路吧(口才不行,见谅哈) 游戏辅助有三种方法,一种是读内存,这个不知道怎么分析,还有一种是获取封包,这个分析起来复杂,最后一种是图片识别再分析,这里采用最后一种 ...
- oauth与openid
转自http://desert3.iteye.com/blog/1701626 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列 ...
- 大IT公司笔试
都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...