keyframes应用在animation上，animation应用在元素上。

<html>

<style type="text/css">

.div1 {

 width:100px;height:100px;border:1px solid #000;position:relative;

 animation : move 800ms ease-out infinite alternate;

}

@keyframes move {

 from {top:0px;}

 to   {top:100px;}

}

</style>

<body>

<div class="div1">

</div>

</body>

</html>

　　

css animation和keyframes的更多相关文章

  1. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  2. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  3. 闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题

    opacity 是CSS3中:设置元素的不透明度的属性(支持ie8以上) opacity: value|inherit;value用于规定不透明度.从 0.0 (完全透明)到 1.0(完全不透明). ...

  4. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  5. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  6. css3中的transform、transition、translate、animation（@keyframes）的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  7. [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

    We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...

  8. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  9. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

随机推荐

  1. Python实践摘录

    1:中文编码问题 Python语言默认不识别UTF-8的编码字符串,所以当文件中有中文并且是以UTF-8编码时,需要在python文件头部加一行注释,指明识别utf-8编码. # coding=utf ...

  2. 使用Bootstrap+metisMenu完成简单的后台管理界面

    零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...

  3. 4、线程范围内的数据共享之ThreadLocal

    /** * 线程范围类的数据共享 * 核心:ThreadLocal类 * 实际场景: * Hibernate的getCurrentSession方法,就是从线程范围内获取存在的session,如果不存 ...

  4. vsftp 虚拟用户测试

    1.创建用于进行FTP验证的帐号密码数据库文件,单数行为账户名,偶数行为密码.[root@rhel1 vsftpd]# vi /etc/vsftpd/vuser.listuser1123456user ...

  5. HDU 2217 Data Structure?

    C - Data Structure? Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  6. 推荐一款VS2008代码增强插件——MetalScroll

    时光如水,岁月如歌.虽然现在已经是2013年底马上就要步入2014了,但还是有很多人在使用VS2008开发项目,今天要推荐一款VS2008(同时支持VS2005,但不支持VS2010)代码增强插件给仍 ...

  7. Oracle的悲观锁和乐观锁

    为了得到最大的性能,一般数据库都有并发机制,不过带来的问题就是数据访问的冲突.为了解决这个问题,大多数数据库用的方法就是数据的锁定. 数据的锁定分为两种方法,第一种叫做悲观锁,第二种叫做乐观锁.什么叫 ...

  8. blktrace + blkparse + btt 分析IO

    blktrace是一款block层的trace工具,block层在IO路径上的位置: 一个IO的生命周期大约是: ● I/O enters block layer – it can be: – Rem ...

  9. spdk 编译动态库( spdk compiles shared library )

    1,dpdk编译共享库 默认情况下都编译出静态库,如果想编译出动态库,把config/common_base文件中的CONFIG_RTE_BUILD_SHARED_LIB改成y即可. 2,spdk编译 ...

  10. Nginx Rewrite正则表达式案例

    前两天简单整理了下Nginx的URL Rewrite基本指令,今天谈谈Nginx Rewrite的location正则表达式. 1.Nginx Rewrite 基本标记(flags) last 相当于 ...