<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:mymove;

animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */

/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */

-webkit-animation-name:mymove;

-webkit-animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */

}

@keyframes mymove /* 对应animation-name，里面为执行的动画*/

{

from {left:200px;}/*执行动画的初始位置*/

to {left:0px;}/*动画结束位置*/

0% {

opacity: 0.1; /*初始状态 透明度为10%*/

}

50% {

opacity: 0.5; /*中间状态 透明度为50%*/

}

100% {

opacity: 1; /*结尾状态 不透明*/

}

}

@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/

{

from {left:200px;}/*执行动画的初始位置*/

to {left:0px;}/*动画结束位置*/

}

</style>

</head>

<body>

<div></div>

</body>

</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. slidemenu

    1. 在github上有一个效果不错的开源库,SlidingMenu 最新的代码下载下来后,会报错: No resource found that matches the given name: at ...

  2. (转) 实现wince datagrid 上下滑屏数据浏览

    开发 基于wince 手持设备数据库应用时 由于是触摸屏 当datagrid 数据过多 往往用户烦于去控制又窄又细的上下滚动条 尤其是高分辨率的屏上 (如魅族M8系统 720×480) 而且datag ...

  3. 用css3技术给网站加分

    自己写了几个小DEMO,请打开http://codepen.io/shenggen/

  4. 在iOS平台使用ffmpeg解码h264视频流（转）

    在iOS平台使用ffmpeg解码h264视频流,有需要的朋友可以参考下. 对于视频文件和rtsp之类的主流视频传输协议,ffmpeg提供avformat_open_input接口,直接将文件路径或UR ...

  5. LVS集群中的IP负载均衡技术

    LVS集群中的IP负载均衡技术 章文嵩 (wensong@linux-vs.org) 转自LVS官方参考资料 2002 年 4 月 本文在分析服务器集群实现虚拟网络服务的相关技术上,详细描述了LVS集 ...

  6. Tomcat Session Clustering

    搭建 Tomcat 集群需要解决很多的问题,其中之一就是要解决 Session 共享问题.小规模集群可以使用 Tomcat 提供的 Session Clustering 来解决. For the im ...

  7. git项目.gitignore文件不生效解决办法

    配置好.gitignore文件如下: HELP.md /target/ !.mvn/wrapper/maven-wrapper.jar ### STS ### .apt_generated .clas ...

  8. linux内核段属性机制【转】

    本文转载自:https://github.com/TongxinV/oneBook/issues/9 linux内核段属性机制 以subsys_initcall和module_init为例 subsy ...

  9. UVA10870 Recurrences —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/UVA-10870 题意: 典型的矩阵快速幂的运用.比一般的斐波那契数推导式多了几项而已. 代码如下: #include <bit ...

  10. Codeforces Beta Round #7 D. Palindrome Degree —— 字符串哈希

    题目链接:http://codeforces.com/contest/7/problem/D D. Palindrome Degree time limit per test 1 second mem ...