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

  • 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. Jenkins持续化集成

    Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境 操作系统:lin ...

  2. 学习Pytbon第十八篇,异常处理

    什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...

  3. [CodeChef]RIN(最小割)

    Description  有m门课可以在n个学期内学习,第i门课在第j个学期的收益是\(X_{i,j}\),一个学期可以学多门课,有的课之间有依赖关系,即必须先学a再学b,求最大收益.n,m<= ...

  4. 13,发布CRM

    发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...

  5. CSS继承特殊

    继承 CSS的某些样式具有继承性.继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代   如:在p中的所有字体都为红色     p{color:red;}    <p ...

  6. 51Nod 1680 区间求和 树状数组

    题意: 给出一个长度为\(n\)的数列\(A_i\),定义\(f(k)\)为所有长度大于等于\(k\)的子区间中前\(k\)大数之和的和. 求\(\sum_{k=1}^{n}f(k) \; mod \ ...

  7. sql里的多行多列转一行多列小技巧

    ---恢复内容开始--- [ 今天下午接受了一个紧急小任务,是将一组比赛记录统计出来,将象棋游戏玩家的两条记录在一行里面显示,进数据库看之后是首先想到的是行转列,但是一开始就觉得不对,后来写到一半确实 ...

  8. 编译ffmpeg

    1.下载ffmpeg-0.9.2.tar.gz  http://ffmpeg.org/releases/ 下载需要的版本 2.编译linux (centos5.5) 64位版本 ./configure ...

  9. 论如何入门地使用vscode

    微软大法好啊 这货更像是个gedit 以下内容只适合Oiers使用 本文档只适合新手引导的阶段使用 下载 这个是链接 可见这东西是和Emacs一样跨系统的 不知道为什么下载速度贼快 配置 还记得我们用 ...

  10. android中Activity中的WindowManager与Window

    在做项目的过程中,需要实现Activity非全屏显示.窗口背景透明显示的效果. 在实现这些功能的过程中,涉及到Window与WindowManager两个类,经过查一些相关资料,了解二者之间的不同点如 ...