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. sql语句 case

    case: SELECT stdname, max( CASE WHEN stdsubject = '语文' THEN result ELSE 0 END) "语文", max( ...

  2. jquery 如何获取有多个class名的元素

      1.情景展示 如何使用jquery获取带有多个class样式的元素? 2.解决方案 $("p.opinion.mb15.gray2e.max2line.mr20:contains('大摩 ...

  3. python3 数据库查询

    #xiaodeng #python 3 #数据库查询 #第一种方法(fethall,返回所有行数据) import pymysql #connect链接服务器,注意和服务库编码一致 conn=pymy ...

  4. SSM框架搭建总结（2）

    一.开发环境搭建 1.本地jdk安装及配置环境变量 2.本地tomcat安装 3.本地maven安装 3.1 maven安装 3.2 maven数据仓库配置settings.xml 4.本地安装SVN ...

  5. Ubuntu18.04中配置QT5.11开发环境

    准备工作 参考 https://wiki.qt.io/Install_Qt_5_on_Ubuntu . # 安装g++ sudo apt install build-essential # sudo ...

  6. 【TP3.2.X】(同样适用于OT) 设置单入口index.php文件，区分PC/WAP/Wechat 三个终端

    1.目的:本教程适用于 OneThink1.0.或者TP3.2.X 系列,达到单入口index.php文件,区分PC/WAP/Wechat 三个终端 2.启发至 : http://www.thinkp ...

  7. 【Oracle+PHP】php连接oracle设定字符集，避免乱码

    数据库用oracle,当php连接oracle的时候,最好指定字符集. 查PHP手册,oci_connect的第四个参数为charset,这是关键. 首先获取oracle的字符集,运行“select ...

  8. （原）torch中提示Unwritable object <userdata> at <?>.callback.self.XXX.threads.__gc__

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6549432.html 参考网址: https://github.com/torch/threads/i ...

  9. ThinkPHP学习(二)

    书接前文. 我想前台填写内容,然后在后台保存一下,规划了一下前台要录入的内容,主要包括title.content两大内容.然后简单设计了一个前台页面(复杂的我得会啊),就在上篇文章的基础上直接加了: ...

  10. 自由是有代价的：聊聊这几年尝试的道路 要想生活好，别看哲学书和思想书。简单看看可以，看多了问题就大了。还是要去研究研究些具体的问题。别jb坐在屋子里，嘴里念着海子的诗，脑袋里想康德想的事情，兜里屁都没有，幻想自己是大国总理，去想影帝是怎么炼成的。

    自由是有代价的:聊聊这几年尝试的道路 现在不愿意写过多的技术文章了,一点是现在做的技术比较偏,写出来看的人也不多,二来是家庭事务比较繁多,没以前那么有时间写了.最近,园子里多了一些写经历的文章,我也将 ...