C3 Transitions, Transforms 以及 Animation总结
C3 Transitions, Transforms 以及 Animation总结
前言
昨天有人咨询我面试的注意事项, 突然就意识到自己这块非常差, 竟然没有任何的印象, 准备看着大神老师的博客, 学习一边, 以便以后有个了解和参考
- 其中的例子都是用自己的方法实现的, 然后没有考虑任何兼容性, 只是单纯的熟悉下这些属性
- 但是能保证每一个例子, 都是自己亲自测试的, 在我这跑着, 没得问题.
文章目录
- Transition总结
- Transforms总结
- Animation总结
- 总结效果展示
- 浏览器支持情况
- 延伸
- 总结
Transitions
- 平滑的改变CSS的值.
- 只要属性的值改变了, 无论是点击事件,焦点事件,还是鼠标的hover事件, 只要是值改变了, 就是平滑的, 就是动画
具体属性
transition-property:*指定过渡的性质. 例如: transition-property: background指的是background参与到这个过渡transition-duration:*指定这个过渡的持续时间transition-delay:*延迟过渡时间transition-timing-function:*指定过渡类型, 有ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier
简单举例
<style>
.trans {
-webkit-transition-property: background-color;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}
</style>
</head>
<body>
<p class="trans">经过出现效果</p>
</body>
合并属性
<style>
.trans {
transition: background-color 3s 0.5s ease;
-webkit-transition: background-color 3s 0.5s ease;
-moz-transition: background-color 3s 0.5s ease;
-o-transition: background-color 3s 0.5s ease;
-ms-transition: background-color 3s 0.5s ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}
</style>
transition-timing-function详解
linear: 线性变换, 始终如一ease-in: 进去的时候, 先慢后快ease-out: 出来的时候, 先快后慢ease-in-out: 完整过程, 先慢, 再快, 再慢cubic-bezier: 贝塞尔曲线, 这就牛逼了
Transform总结
transform指变换, 指的是拉伸, 压缩, 旋转, 偏移, 旋转四种变换.
transform: skew(35deg): 拉伸transform: scale(1, 0.5): 压缩transform: rotate(45deg): 旋转transform: translate(10px, 20px): 偏移
举例:
<style>
div {
width: 100px;
height: 100px;
background: #aaa;
}
.trans_skew {
transform: skew(35deg);
}
.trans_scale {
transform: scale(0.5, 0.5);
}
.trans_rotate {
transform: rotate(45deg)
}
.trans_translate {
transform: translate(100px, 50px);
}
</style>
<body>
<div>原版</div>
<div class="trans_skew">skew</div>
<div class="trans_scale">sclate</div>
<div class="trans_rotate">rotate</div>
<div class="trans_translate">translate</div>
</body>
动态效果
<style>
div {
width: 100px;
height: 100px;
background: #aaa;
transition: all 2s;
}
.transtion_all:hover {
transform: translate(10deg, 20px);
}
</style>
<body>
<div class="transtion_all">原版</div>
</body>
Animations总结
各个属性值
- animation-name: 对应的选择器keyframe的名称
- animation-duration: 动画所花费的时间.
- animation-fiming-fuction: 动画的曲线速度
- animation-delay: 动画开始之前的延时
- animation-iteration-count: 动画应该播放的次数
- animation-direction: 规定是否播放轮流反向动画
- normal: 默认值, 动画应该正常播放
- alternate: 动画应该轮流反向播放
举例01
<style>
div {
width: 200px;
height: 100px;
background: #aaa;
}
/* 定义动画 */
@-webkit-keyframes myAimation {
0% {
padding: 0;
}
50% {
padding: 20px;
}
100% {
padding: 100px;
}
}
.animations_show:hover {
-webkit-animation-name: myAimation;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
</style>
<body>
<div class="animations_show">animation-box</div>
</body>
举例02
<style>
img {
box-shadow: 0 0 8px;
}
img:hover {
animation-name: anim;
animation-duration: 2s;
}
@keyframes anim {
0% {
box-shadow: 0 0 8px;
}
20% {
box-shadow: 0px 0px 20px;
}
100% {
box-shadow: 0 0 8px;
}
}
</style>
<body>
<img src="./test.jpg" alt="">
</body
综合案例
01
<style>
img {
width: 100px;
height: 120px;
position: absolute;
transition: opacity 1s ease-in-out;
/* opacity: 0; */
}
img:hover {
/* 因为我们hover上面的时候, 只能hover上面的img, 然后上面的img透明度变成了完全透明, 然后下面的图片就显示出来了 */
opacity: 0;
/* filter: 定义元素的可视效果, */
/* filter: alpha(opacity=0); */
}
</style>
<body>
<img src="./test.jpg" alt="">
<img src="./yuanjihuasy.png" alt="">
</body>
02
借助JS实现点击切换
<style>
img {
width: 100px;
height: 120px;
position: absolute;
transition: opacity 1s ease-in-out;
}
.img_click {
opacity: 0;
}
</style>
<body>
<img src="./test.jpg" alt="">
<img src="./yuanjihuasy.png" alt="">
<script>
(function () {
var images = document.getElementsByTagName('img')
images[1].onclick = function () {
this.classList.toggle('img_click')
}
})()
</script>
</body>
03
图片无限自动变化
<style>
img {
width: 100px;
height: 120px;
}
img:hover {
position: absolute;
animation-name: fadeInOut;
animation-duration: 5s;
/* 此时我们的动画次数变成了无限次执行 */
animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInOut {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<body>
<img src="./test.jpg" alt="">
</body>
04
两张图片轮流切换
<style>
img {
width: 100px;
height: 120px;
transition: all 1s ease-in-out;
}
.img-box {
background: #aaa;
}
.top {
position: absolute;
transform: scale(0, 0);
opacity: 0;
transform-origin: top right;
-webkit-transform-origin: top right;
}
.img-box:hover .top {
opacity: 1;
transform: scale(1, 1);
}
.img-box:hover .bottom {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
-webkit-transform-origin: bottom left;
}
</style>
<body>
<div class="img-box">
<img class="top" src="./test.jpg" alt="">
<img class="bottom" src="./yuanjihuasy.png" alt="">
</div>
</body>
05
<style>
img {
width: 100px;
height: 120px;
transition: all 1s ease-in-out;
}
.top {
position: absolute;
}
.img-box:hover .top{
transform: scale(0, 0) rotate(360deg);
opacity: 0;
}
.bottom {
transform: scale(1, 0);
opacity: 0;
}
.img-box:hover .bottom {
opacity: 1;
transform: scale(1, 1);
}
</style>
<body>
<div class="img-box">
<img src="./yuanjihuasy.png" alt="" class="top" >
<img src="./test.jpg" alt="" class="bottom">
</div>
</body>
06
选项卡案例
<style>
.img-box-outer {
width: 100px;
height: 120px;
overflow: hidden;
}
.img-box {
width: 400px;
height: 120px;
transition: all 1s ease-in-out;
}
img {
float: left;
width: 100px;
height: 120px;
}
li:hover {
background: #aaa;
cursor: pointer;
}
</style>
<body>
<div class="img-box-outer">
<div class="img-box">
<img src="./yuanjihuasy.png">
<img src="./test.jpg">
<img src="./header.jpg">
<img src="./flower.jpg">
</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
onload = function () {
var imgBox = document.getElementsByClassName('img-box')[0],
triggers = document.getElementsByTagName('li'),
triggersLength = triggers.length
for (let i = 0; i < triggersLength; i++) {
triggers[i].onclick = function () {
let index = Number(this.innerText)
imgBox.style.marginLeft = (1 - index) * 100 + 'px';
return false
}
}
}
</script>
</body>
07
手风琴的一个案例
<style>
* {
margin: 0;
padding: 0;
}
.outer {
height: 30px;
overflow: hidden;
transition: height 1s ease-in-out;
}
.outer:nth-child(1) {
height: 180px;
}
h3 {
height: 30px;
background: skyblue;
}
p {
height: 150px;
background: #aaa;
}
</style>
<body>
<div class="outer">
<h3>1</h3>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</div>
<div class="outer">
<h3>2</h3>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</div>
<div class="outer">
<h3>3</h3>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</div>
<script>
// 获取所有的标题
onload = () => {
const outerArr = document.querySelectorAll('.outer')
const hArr = document.querySelectorAll('h3')
// 默认动画没有执行
let transing = false
Array.prototype.forEach.call(hArr, (element) => {
let _this = element
element.addEventListener('click', () => {
if (transing) return
let currentIndex = Number(_this.innerText) - 1
// 动画开始执行
transing = true
Array.prototype.forEach.call(outerArr, (outer, index) => {
if (currentIndex === index) {
outer.style.height = '180px'
} else {
outer.style.height = '30px'
}
})
}, false)
})
Array.prototype.forEach.call(outerArr, (outer, index) => {
// 动画执行结束
outer.addEventListener('transitionend', () => {
transing = false
})
})
}
</script>
</body>
大神传送门: 张鑫旭大神的博客原文
C3 Transitions, Transforms 以及 Animation总结的更多相关文章
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
CSS3 Transitions, Transforms和Animation使用简介与应用展示 by zhangxinxu from http://www.zhangxinxu.com本文地址:htt ...
- CSS3 Transitions, Transforms和Animation的使用
一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...
- 【转载】CSS3 Transitions, Transforms和Animation使用简介与应用展示
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=1 ...
- IE10开始支持CSS3 Transitions, Transforms 和 Animations
这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms ...
- css3实践之图片轮播（Transform，Transition和Animation）
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- CSS3动画总结学习(一)
参考文章: CSS3 Transitions, Transforms和Animation使用简介与应用展示 CSS 参考手册 动画的分类 平移动画 transform: 就是变换, 变换, 变换 也就 ...
- 前端小知识~~关于css3新增知识~~归纳总结
1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...
- css3新特性
1.css3选择器 我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: Body > .mainTabContainer div > s ...
- CSS/CSS3长度、时间、频率、角度单位大全
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1494 一.一笔带过的 ...
随机推荐
- 项目Alpha冲刺（团队9/10）
项目Alpha冲刺(团队9/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...
- excel 创建数据有效性及背景颜色
需求:用excel做数据或者表格时经常需要在一列中给出固定的几个进行悬着,这是如果每次键盘输入降低工作效率.如果做成鼠标双击进行选择,则提高很多效率,比如需要给一列填写Pass或Failure时,具体 ...
- Python 004- 利用图灵小机器人来搭建微信聊天自动回复机器人
实现步骤: 1.获取微信的使用权,即python脚本能控制微信收发信息. 2.python脚本收到聊天信息后,要对该信息进行处理,返回机器人的回应信息. 一二两步要用到wxpy库里的各种组件来收发信息 ...
- HashMap存入大量数据是否要预定义存储空间
按说HashMap的负载极限为0.75,可是,测试程序并看不出这个结果.待探讨 测试程序如下: 根据结果看不出来预定义有什么影响. public class test { public static ...
- spark 33G表
http://192.168.2.51:4041 http://hadoop1:8088/proxy/application_1512362707596_0006/executors/ Executo ...
- Hibernate中的merge使用详情解说
merge的作用是:新new一个对象,如果该对象设置了ID,则这个对象就当作游离态处理: 当ID在数据库中不能找到时,用up ...
- Struts2的运行流程及其工作原理
1 服务开启,配置文件初始化 2 用户访问login请求 3 进入web.xml文件中我们配置的核心控制器(filter) 4 核心过滤器中有一个FilterDispatcher,FilterDisp ...
- uCOS-II模拟(VS2010&WIN32)
转自http://www.amobbs.com/thread-5462878-1-1.html 自学uCOS-II源码,在论坛上上看到大神在WIN7 Visual Studio 2010环境下调试uC ...
- hdu 4463 Outlets（最小生成树）
题意:n个点修路,要求总长度最小,但是有两个点p.q必须相连 思路:完全图,prim算法的效率取决于节点数,适用于稠密图.用prim求解. p.q间距离设为0即可,最后输出时加上p.q间的距离 pri ...
- POJ1228：Grandpa's Estate（给定一些点，问是否可以确定一个凸包）
Being the only living descendant of his grandfather, Kamran the Believer inherited all of the grandp ...