注:代码显示效果可以自行粘贴复制查看

  • 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>
你好。这是一个 div 元素。
  • 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的使用的更多相关文章

  1. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  2. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  3. css中关于transform、transition、animate的区别

    写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...

  4. vue学习(8)-过渡transition&动画animate

      进入之前                                                    离开之后 v-enter---v-enter-to            v-lea ...

  5. transition&transform,CSS中过度和变形的设置

    设置样式的过度效果transition-property: none/all; transition-duration:2s;运动时间,默认是0秒 transition-delay:0s; 延迟时间默 ...

  6. transition & transform

    transition: 过渡时间 被改变属性 执行函数 延迟时间 transition:width 1s,height 2s 1s; transform: 平移(translate).缩放(scale ...

  7. CSS3 transition/transform

    Transition 1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-functi ...

  8. css3属性 transition transform

    1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...

  9. CSS3 傻傻分不清楚的transition, transform 和 animation

    transition transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下: transition : transition-property transition-durat ...

随机推荐

  1. 【Effective C++读书笔记】序

    C++ 是一个难学易用的语言! [C++为什么难学?] C++的难学,不仅在其广博的语法,以及语法背后的语义,以及语义背后的深层思维,以及深层思维背后的对象模型: C++的难学还在于它提供了四种不同而 ...

  2. 【jQuery】input框输入手机号自动填充空格

    <input type="tel" id="tel"> $("#tel").keyup(function(){ _self = ...

  3. array_unique() - 去除数组中重复的元素值

      array_unique() 定义和用法 array_unique() 函数移除数组中的重复的值,并返回结果数组. 当几个数组元素的值相等时,只保留第一个元素,其他的元素被删除. 返回的数组中键名 ...

  4. php 图片操作类,支持生成缩略图,添加水印,上传缩略图

    <?php class Image {     //类开始     public $originimage = ""; //源图片文件地址     public $image ...

  5. CSS选取指定位置标签first-child、last-child、nth-child

    1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表 ...

  6. protues7.5安装

    win8 + protues7.5的安装  首先找到解压的文件夹,然后按照一步一步安装,如果中间出现不一样的,请退到前一步重新安装, 注意,安装的目录不要出现中文路径.

  7. talent-aio源码阅读小记(一)

    近来在oschina上看到一个很火的java 即时通讯项目talent-aio,恰巧想了解一下这方面的东西,就阅读了一下项目的源码,这里对自己阅读源码后的一些心得体会做一下备忘,也希望能够对其他项目中 ...

  8. perl实现监控linux

    1.使用root用户telnet进入linux系统 2.修改DNS以下两种方法 A.通过setup命令配置dns B.通过在/etc目录下创建resolv.conf文件 3.查看DNS是否配置成功 [ ...

  9. poj2001Shortest Prefixes(trie)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 18687   Accepted: 808 ...

  10. 获取IMSI

    转:http://letsunlockiphone.guru/find-imsi-number/ HOW TO FIND IMSI NUMBER (UPDATED) You probably alre ...