终于结束了最后css3的一节课，关于animation的使用，其实之前已经用过一次。大致要了解的就是，关于如何让动画停在最后一帧的方法。视频里有提到过css3出了个新的样式可以实现，但是老师没有记住，用了个变通的方法，就是单独设置一个

!important;}

然后在js里将这个class赋值给元素即可。 
后来我又网上找了一下，发现其实是一个叫animation-fill-mode的样式，将它的值设置为forwards，就可以实现效果。

另：关于animation还有一些疑惑，最疑惑的在于，js，jq还有css3既然都能实现动画，到底哪个性能最好呢？我还要去调查一下，以后再写吧。

<style>
#wrap{
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
margin: 10px auto;
}
#box{
width: 100px;
height: 100px;
position: absolute;
background: cornflowerblue;
;
;
;//3代表是动画执行3次
animation-fill-mode: forwards; //也可以将forwards写在animation里作为复合样式
}
@keyframes move{
%{
;
}
%{
;
}
%{
left: 300px;top: 300px;
}
%{
;top: 300px;
}
%{
;
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>

【巩固】CSS3的animation基础的更多相关文章

  1. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  2. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  4. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  6. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  7. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  8. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  9. Html5+Css3 Banner Animation 多方位移动特效

    背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...

随机推荐

  1. RabbitMQ基础概念详细介绍

    http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ...

  2. 0506--Scrum项目1.0

    应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 团队项目选题  四则运算 NABCD 模型 1) N (Need 需求) ...

  3. PHP的三种输出方式

    (1)echo 是PHP语句,没有返回值,用于输出一个或多个字符串 (2)print() 是函数,可以有返回值,只能打印出简单类型变量的值,例如int.string (3)print_r() 是函数, ...

  4. iOS开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  5. iOS开发拓展篇—音频处理（音乐播放器1）

    iOS开发拓展篇—音频处理(音乐播放器1) 说明:该系列文章通过实现一个简单的音乐播放器来介绍音频处理的相关知识点,需要重点注意很多细节的处理. 一.调整项目的结构,导入必要的素材 调整后的项目结构如 ...

  6. CTSC&&APIO 2015 酱油记

    在北京待了一周多,还是写点记录吧. 人民大学校园还是挺不错的,不过伙食差评. CTSC的题目太神,根本不会搞,一试20二试10分..本来都寄希望于提交答案题的..结果就悲剧了. 然后是听大爷们的论文答 ...

  7. 修改 UISearchBar cancelButton 样式

    今天收到个问题,老大让我修改UISearchBar cancelButton的样式本来以为很简单的一个活,没想到让我长知识了. 开始在网上搜到的方法和我想象的一样,通过遍历Subviews获得butt ...

  8. Jquery EasyUI Tree .net实例

    图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...

  9. Brief Tour of the Standard Library

    10.1. Operating System Interface The os module provides dozens of functions for interacting with the ...

  10. PCL中的类

    1. PCLBase pcl_base.h中定义了PCL中的基类PCLBase,PCL中的大部分算法都使用了其中的方法. PCLBase实现了点云数据及其索引的定义和访问. 两个主要的变量input_ ...