CSS过渡效果transition和动画
一、过渡效果
可以在不适用Flash和js 的情况下实现过渡效果
属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的css属性的名称
transition-duration 定义过渡效果话费的时间 默认是0 单位是秒 s
transition-timing-function 规定过渡效果的时间曲线, 默认是ease
linear 均速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay 规定过渡效果合适开始 默认是0s 也就是立马开始
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
设置方式:
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width 0.5s ease-in 0s;
}
div:hover {
width: 400px;
}
相当于在div 的样式里面申明要过渡的条件,当鼠标经过div的时候盒子就会变成400px宽
小知识点:
如果有多个属性可以用逗号隔开
所有属性读变化用all: transition: all 0.5s; 定位盒子居中对齐完美写法 transform: translate(50%); transform走自身的一半
二、设置变形中心点
img {
margin: 100px;
transition: all 0.5s;
}
img:hover {
transform: rotate(180deg);
} tranform-origin 设置元素转换变形的原点 默认是center center
(可以通过left right top bottom center 来调整旋转中点,也看可以用像素) img {
margin:300px;
transition: all 0.5s;
transform-origin: top left;
}
img:hover {
transform: rotate(720deg);
} xyz 一起设置
transform: translate3d(x,y,z)x和y可以是百分比,z只能是像素
三、透视透视 perspective
可以将2D平面转换为伪3D效果
透视原理:近大远小
浏览器透视: 把近大远小的所有图像透视在屏幕上
perspective 视距,表示视距到屏幕的长短
perspective给父元素添加的 backface--visibility 定义当元素不同向屏幕时是否可见
四、CSS动画animation
动画是css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果 语法格式: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 定义格式:
@keyframes go {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
应用格式:
div {
width: 100px;
height: 100px;
background-color: pink;
/*引用动画*/
animation: go 2s ease 0s 2; /*自定义动画名称*/
} 属性 描述
animation 所有动画属性的简写属性,除了 animation-play-state
animation-name 动画名称
animation-duration 动画完成一个周期需要的时间
animation-timing-funcation 速度曲线
animation-delay 规定动画何时开始
animation-iteration-count 规定动画被播放的次数
infinite 无限循环
animation-direction 是否在下一个周期逆向播放
reverse 反方向
altermate 先正常运行 再反方向运行 持续交替运行
alternate-reverse 先反方向运行 在正方向 持续交替
animation-play-state 是否正在运行或暂停 默认是running
paused 鼠标经过暂停
animation-play-state: paused;
animation-fill-mode 对象动画时间之外的状态 一般情况下用前两个 如果要定义多个动画用百分比来设置
@keyframes go {
0% { /*起始位置*/
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(800px,0,0);
}
50% {
transform: translate3d(800px,400px,0);
}
75% {
transform: translate3d(0,400px,0);
}
100% {
transform: translate3d(0,0,0);
}
CSS过渡效果transition和动画的更多相关文章
- CSS之transition(动画)
Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3的过渡效果(transition)与动画(animation)
1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transitio ...
- css动画效果之transition(动画过渡效果属性)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 我想学前端动画-CSS之transition
Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- transition(动画属性)
CSS 过渡(transition)是通过定义元素从起点的状态和结束点的状态,在一定的时间区间内实现元素平滑地过渡或变化的一种补间动画机制.你可以让属性的改变过程持续一段时间,而不是立即生效. 通过t ...
- CSS总结六:动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
随机推荐
- Windows .net服务器系列 wmic命令使用示例--Examples of WMIC commands for Windows .NET SERVER Family
1.0 Method execution: NICCONFIG (Win32_NetworkAdapterConfiguration) WMIC NICCONFIG WHERE Index=1 CAL ...
- Flutter状态管理Provider,简单上手
在之前的文章中介绍了 Google 官方仓库下的一个状态管理 Provide.乍一看这俩玩意可能很容易就被认为是同一个东西,仔细一看,这不就差了一个字吗,有什么区别呢. 首先,你要知道的最大的一个区别 ...
- DRF序列化器
序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 反序列化,把客户端发送过来的数据,经过request以后变成字典 ...
- java基本思想
面向对象 众所周知,面向对象编程思想是java的基本思想.java的整个体系和技术实现都是以这个思想为基础.(这个通过类和接口能看出来,后面提到) 对这个事情的认知度甚至变成了很多公司的面试标准.比如 ...
- 关于PADS的一些概念和实用技巧(一)
关于PADS的一些概念和实用技巧(一) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 1. 关于part,CAE Decal,PCB Decal Part ...
- 最新 小红书java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.小红书等10家互联网公司的校招Offer,因为某些自身原因最终选择了小红书.6.7月主要是做系统复习.项目复盘.LeetCo ...
- jquery获得 url的变量
(function($){ $.extend({ urlGet:function () { var aQuery = window.location.href.split("?") ...
- linux防火墙学习
iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分.可以直接配置,也可以通过许多前端和图形界面配置.语法: iptables(选项)(参数)1,命令选项-t<表 ...
- linux自由软件安装 ./config, make的理解 -- ongoing
在linux系统中安装软件的其中一种:源码安装的方法是,先输入./configure,然后输入make,最后make install.或许有人留意到没有,这些软件的根目录中开始是没有Makefile的 ...
- 事务的ACID
事务提供一种机制将一个活动涉及的所有操作纳入到一个不可分割的执行单元,组成事务的所有操作只有在所有操作均能正常执行的情况下方能提交,只要其中任一操作执行失败,都将导致整个事务的回滚. 简单地说,事务提 ...