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 一.一笔带过的 ...
随机推荐
- VC最小化到托盘程序
在实际操作电脑的过程中,我们常常可以看到一些应用程序可以最小化到桌面右下角的托盘中显示,如一些杀毒软件等开机就显示在托盘中,或是我们常用的QQ等聊天工具,都可以最小化在托盘中,如图-1. 在图-1中, ...
- SpringMVC中返回JSON时乱码的解决方案
springMVC中返回JSON会出现乱码,解决如下: produces = "text/html;charset=UTF-8" @ResponseBody @RequestMap ...
- ulink函数的使用【学习笔记】
#include "apue.h" #include <fcntl.h> int main(void) { ) err_sys("open error&quo ...
- ORACLE 创建表空间及用户
/*创建存放原始数据的表空间*/ create tablespace Djzh_original datafile 'E:\APP\ADMINISTRATOR\ORADATA\ORCL\Djzh_or ...
- highchart学习网址
http://www.highcharts.me/api/index.html
- 小米2在Eclipse 调试，要注意下列步骤。（转）
小米2在Eclipse 调试,要注意下列步骤.1.连接线,打开设置:USB线连接小米2,在设置-->开发者选项->USB 调是打开.如果这一步,就业在Eclipse中真机调试,下面的步骤不 ...
- solr安装-tomcat单机版
今天又装了一次solr,之前太忙没顾得上写安装文档,今天抽时间记录下来安装过程,供小白们参考. 1. 准备工作 1. 服务器:linux 2.web服务器apache-tomcat,我的路径:/usr ...
- Android 动态注册 亮屏、息屏广播
/***************************************************************************** * Android 动态注册 亮屏.息屏广 ...
- Watir: Watir-WebDriver对打开的浏览器attach操作
Watir-WebDriver对于已经打开的浏览器,没有办法进行Attach操作. 但是对于自动化操作浏览器过程中点击某链接,打开的新浏览器,是能够定位到的. require 'watir-webdr ...
- 【旧文章搬运】PE感染逆向之修复(Serverx.exe专杀工具出炉手记)
原文发表于百度空间,2008-10-4看雪论坛发表地址:https://bbs.pediy.com/thread-73948.htm================================== ...