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 一.一笔带过的 ...
随机推荐
- Sharepoint2013 列表的NewForm 页面加入一个 保存新建 button
昨天一同事问我怎样在sharepoint2013的NewForm.aspx页面上加入一个 save and new的button.实现save 和new的功能.save的功能和默认的save按钮效果一 ...
- lonlifeOJ1152 “玲珑杯”ACM比赛 Round #19 概率DP
E -- Expected value of the expression DESCRIPTION You are given an expression: A0O1A1O2A2⋯OnAnA0O1A1 ...
- Java多态性详解 (父类引用子类对象)
面向对象编程有三个特征,即封装.继承和多态. 封装隐藏了类的内部实现机制,从而可以在不影响使用者的前提下改变类的内部结构,同时保护了数据. 继承是为了重用父类代码,同时为实现多态性作准备.那么什么是多 ...
- bash shell最基本的语法
1 shell语句的基本构成 shell每个基本的构成元素之间都相隔一个空格. 比如[ -e file ],[.-e.file.]这四个基本元素之间都相隔了一个空格. 同样的道理[ ! -e file ...
- URAL 1731. Dill（数学啊 ）
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1731 1731. Dill Time limit: 0.5 second Memory ...
- spring cloud 服务消费
Ribbon Ribbon可以在通过客户端中配置的ribbonServerList服务端列表去轮询访问以达到均衡负载的作用. 当Ribbon与Eureka联合使用时,ribbonServerList会 ...
- WJC上学记
WJC上学记题目描述:WJC为了追求YHY,决定考上树人,但是,愚蠢的他没有足够好的成绩,只能靠自己的亲戚来帮忙.但是由于他足够愚蠢,连自己的亲戚都不认识,仁慈而被树人优录的Geek_du决定帮助他. ...
- Mac OS X 开发环境搭建之利用 Parallel Desktop 安装 CentOS 7 [转载]
背景 在企业级软件系统中,数据库的地位是比较高的,而且一般都要求支持多种数据库,如 Oracle. DB2.MySQL 等,它们的最新版本大多都不再支持 Mac OS X 系统,所以装一个 Linux ...
- maven安装的详细步骤
1.下载maven的bin,在apache官方网站下载.window系统下的下载红色方框的 2.解压后, 把bin的位置设在环境变量里,新建环境变量 MAVEN_HOME.这个配置是方便以后更换mav ...
- 最小生成树，并查集的思想 nyoj1239
#include<stdio.h> #include<string.h> #include<algorithm> using namespace std; int ...