transition transform animate的使用
注:代码显示效果可以自行粘贴复制查看
- transition(过渡),主要是关注property的变化主要有四个属性transition-property、transition-durantion、transition-timing-function、transition-delay,transition是对这四个属性的简写
- transition-property:要过渡的元素
- transition-durantion:过渡持续的事件
- transition-timing-function:过渡的速度,ease(慢开始然后中间块结束慢),ease-in(慢开始),ease-out(慢结束),ease-in-out(慢开始慢结束),cubic-bezier
<div class="transition-test"></div>
<style>
.transition-test{
display: block;
height: 100px;
width: 100px;
background-color: red; /*transition: width 3s ease,background-color 3s ease;*///如果要过渡的元素的过渡方式不同就用这种写法
transition:all 3s ease;//填写顺序是transition-property(必填)、transition-durantion(必填,不然没有过渡效果)、transition-timing-function、transition-delay
}
.transition-test:hover{
width:%;
background-color: yellow;
}
</style>
- transform(变换)translate(x,y) rotate() scale() skew() martix() 还有其他的3d效果在:http://www.w3school.com.cn/css3/css3_2dtransform.asp
<div>你好。这是一个 div 元素。</div>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transition:all 3s;
}
div:hover
{
transform:rotate(360deg);
}
</style>
- animate(动画)有如下属性:
- @keyframes捆绑到某个选择器
- animation:除了animation-play-state之外的属性的其他所有属性的简写
- animation-name:固定@keyframes动画的名称
- animation-duration:完成一个周期所用时长
- animation-timing-function:速度曲线,默认时ease
- animation-delay:动画何时开始
- animation-count:动画播放次数
- animation-direction:下一动画是否逆向播放
- animation-paly-state:动画的显示状态运行还是暂停
- animation-fill-mode:动画之外的状态
<div></div>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear infinite alternate;
animation-play-state:running; }
@keyframes myfirst
{
% {background:red; left:0px; top:0px;}
% {background:yellow; left:200px; top:0px;}
% {background:blue; left:200px; top:200px;}
% {background:green; left:0px; top:200px;}
% {background:red; left:0px; top:0px;}
}
</style>
transition transform animate的使用的更多相关文章
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- css中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...
- vue学习(8)-过渡transition&动画animate
进入之前 离开之后 v-enter---v-enter-to v-lea ...
- transition&transform,CSS中过度和变形的设置
设置样式的过度效果transition-property: none/all; transition-duration:2s;运动时间,默认是0秒 transition-delay:0s; 延迟时间默 ...
- transition & transform
transition: 过渡时间 被改变属性 执行函数 延迟时间 transition:width 1s,height 2s 1s; transform: 平移(translate).缩放(scale ...
- CSS3 transition/transform
Transition 1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-functi ...
- css3属性 transition transform
1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...
- CSS3 傻傻分不清楚的transition, transform 和 animation
transition transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下: transition : transition-property transition-durat ...
随机推荐
- Jenkins持续化集成
Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境 操作系统:lin ...
- 学习Pytbon第十八篇,异常处理
什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...
- [CodeChef]RIN(最小割)
Description 有m门课可以在n个学期内学习,第i门课在第j个学期的收益是\(X_{i,j}\),一个学期可以学多门课,有的课之间有依赖关系,即必须先学a再学b,求最大收益.n,m<= ...
- 13,发布CRM
发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...
- CSS继承特殊
继承 CSS的某些样式具有继承性.继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代 如:在p中的所有字体都为红色 p{color:red;} <p ...
- 51Nod 1680 区间求和 树状数组
题意: 给出一个长度为\(n\)的数列\(A_i\),定义\(f(k)\)为所有长度大于等于\(k\)的子区间中前\(k\)大数之和的和. 求\(\sum_{k=1}^{n}f(k) \; mod \ ...
- sql里的多行多列转一行多列小技巧
---恢复内容开始--- [ 今天下午接受了一个紧急小任务,是将一组比赛记录统计出来,将象棋游戏玩家的两条记录在一行里面显示,进数据库看之后是首先想到的是行转列,但是一开始就觉得不对,后来写到一半确实 ...
- 编译ffmpeg
1.下载ffmpeg-0.9.2.tar.gz http://ffmpeg.org/releases/ 下载需要的版本 2.编译linux (centos5.5) 64位版本 ./configure ...
- 论如何入门地使用vscode
微软大法好啊 这货更像是个gedit 以下内容只适合Oiers使用 本文档只适合新手引导的阶段使用 下载 这个是链接 可见这东西是和Emacs一样跨系统的 不知道为什么下载速度贼快 配置 还记得我们用 ...
- android中Activity中的WindowManager与Window
在做项目的过程中,需要实现Activity非全屏显示.窗口背景透明显示的效果. 在实现这些功能的过程中,涉及到Window与WindowManager两个类,经过查一些相关资料,了解二者之间的不同点如 ...