1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:100px;
  9. background:red;
  10. position:relative;
  11. animation-name:mymove;
  12. animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
  13.  
  14. /* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
  15. -webkit-animation-name:mymove;
  16. -webkit-animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
  17. }
  18.  
  19. @keyframes mymove /* 对应animation-name，里面为执行的动画*/
  20. {
  21. from {left:200px;}/*执行动画的初始位置*/
  22. to {left:0px;}/*动画结束位置*/
  23. 0% {
  24. opacity: 0.1; /*初始状态 透明度为10%*/
  25. }
  26. 50% {
  27. opacity: 0.5; /*中间状态 透明度为50%*/
  28. }
  29. 100% {
  30. opacity: 1; /*结尾状态 不透明*/
  31. }
  32. }
  33.  
  34. @-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
  35. {
  36. from {left:200px;}/*执行动画的初始位置*/
  37. to {left:0px;}/*动画结束位置*/
  38. }
  39. </style>
  40. </head>
  41. <body>
  42.  
  43. <div></div>
  44.  
  45. </body>
  46. </html>

css div平移淡入淡出的更多相关文章

  1. css实现元素淡入淡出

    @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100 ...

  2. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  3. 用js或css实现淡入淡出

    淡入淡出?你问我有什么用? 提升首页13格的东西,你居然不知道!! 好啦,不废话了,正文. 1 js 主要元素:fadeIn()   fadeOut() show hide 2 css 主要元素: o ...

  4. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  5. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  6. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  9. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

随机推荐

  1. 多用GCD，少用performSelect系列方法

    例如,要延后执行某项任务,可以有下面两种实现方式,而我们应该优先考虑第二种: // Using performSelect: withObject: afterDelay: [self perform ...

  2. throws ? catch checked unchecked

    ThrowableClass Error  (unchecked) Exception IOException (checked) RuntimeException (unchecked) publi ...

  3. Thumbelina，摘自iOS应用Snow White and more stories

    Once upon a time there was a woman who wanted to have a child. 从前,有个想要个孩子的女人. A witch heard her wish ...

  4. 使用酷Q SDK开发QQ机器人

    酷Q SDK下载地址:https://github.com/CoolQ/cqsdk-vc 打开工程,编辑appmain.cpp 将“私聊消息”处的代码 更改为 CQEVENT(int32_t, __e ...

  5. CAN协议与CANOpen协议

    这里详细介绍了CAN协议中数据通信帧每位的含义,有图片,值得一看:https://www.cnblogs.com/pejoicen/p/3986587.html 这里介绍了CanOpen协议,http ...

  6. 人生苦短之Python装饰器

    在Python中函数也是一个对象,我们可以获得函数对象,然后执行函数 def func(): print('I am very good') a = func a 如果我们要是想增强这个函数呢?比如给 ...

  7. Loadrunner脚本自动关联和手动关联

    关于Loadrunner关联一.什么时候需要关联 1.关联的含义        关联(correlation):在脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服 ...

  8. 调用html进行android布局

    1. [代码]html代码     <html>  <head>    <meta http-equiv="content-type" content ...

  9. Win8风格的WPF按钮

    Win8将Windows的风格又进行了一次变革,我还挺喜欢的,有简洁大气的感觉,华丽绚丽的东西看多了之后总会返璞归真寻找简洁大气的感觉才能心情舒畅. 下面就给个WPF下Button的自定义写法.   ...

  10. POJ3728 THE MERCHANT LCA RMQ DP

    题意简述:给定一个N个节点的树,1<=N<=50000 每个节点都有一个权值,代表商品在这个节点的价格.商人从某个节点a移动到节点b,且只能购买并出售一次商品,问最多可以产生多大的利润. ...