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 ...
随机推荐
- 【Effective C++读书笔记】序
C++ 是一个难学易用的语言! [C++为什么难学?] C++的难学,不仅在其广博的语法,以及语法背后的语义,以及语义背后的深层思维,以及深层思维背后的对象模型: C++的难学还在于它提供了四种不同而 ...
- 【jQuery】input框输入手机号自动填充空格
<input type="tel" id="tel"> $("#tel").keyup(function(){ _self = ...
- array_unique() - 去除数组中重复的元素值
array_unique() 定义和用法 array_unique() 函数移除数组中的重复的值,并返回结果数组. 当几个数组元素的值相等时,只保留第一个元素,其他的元素被删除. 返回的数组中键名 ...
- php 图片操作类,支持生成缩略图,添加水印,上传缩略图
<?php class Image { //类开始 public $originimage = ""; //源图片文件地址 public $image ...
- CSS选取指定位置标签first-child、last-child、nth-child
1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表 ...
- protues7.5安装
win8 + protues7.5的安装 首先找到解压的文件夹,然后按照一步一步安装,如果中间出现不一样的,请退到前一步重新安装, 注意,安装的目录不要出现中文路径.
- talent-aio源码阅读小记(一)
近来在oschina上看到一个很火的java 即时通讯项目talent-aio,恰巧想了解一下这方面的东西,就阅读了一下项目的源码,这里对自己阅读源码后的一些心得体会做一下备忘,也希望能够对其他项目中 ...
- perl实现监控linux
1.使用root用户telnet进入linux系统 2.修改DNS以下两种方法 A.通过setup命令配置dns B.通过在/etc目录下创建resolv.conf文件 3.查看DNS是否配置成功 [ ...
- poj2001Shortest Prefixes(trie)
Shortest Prefixes Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 18687 Accepted: 808 ...
- 获取IMSI
转:http://letsunlockiphone.guru/find-imsi-number/ HOW TO FIND IMSI NUMBER (UPDATED) You probably alre ...