animation 属性

动画属性:

1、animation-name:规定需要绑定到选择器的 keyframe 名称。

2、animation-duration:规定完成动画所花费的时间,以秒或毫秒计。

3、animation-timing-function:规定动画的速度曲线。

4、animation-delay:规定在动画开始之前的延迟。

5、animation-iteration-count:规定动画应该播放的次数。

6、animation-direction:规定是否应该轮流反向播放动画。

实例:

1、流星效果:

.start1{
left: 1000px;
width: 170px;
height: 170px;
position: absolute;
margin: 0px;
background:url(../../img/95858PICKE3.png);
background-size: 170px 170px;
animation:mymove1 3s infinite,fadeIn1 3s infinite;/*无限播放*/
animation-delay:0s;
animation-timing-function: linear;/*动画匀速进行*/
}
/*移动动画*/
@-webkit-keyframes mymove1
{
from {left:1100px;top:50px}
to {left:900px;top:250px}
}
/*关键帧改变透明度*/
@-webkit-keyframes fadeIn1 {
0% {
opacity:; /*初始状态 透明度为0*/
}
50% {
opacity: 0.5; /*中间状态 透明度为0.5*/
}
100%,24% {
opacity:; /*结尾状态 透明度为0*/
}
}

规定两个动画同时进行,使两者同步

2、时钟效果

/*指针div*/
.zhizhen{
position: absolute;
top: 180px;
left: 220px;
width: 300px;
height: 300px;
background: url(../../img/img_index.png)no-repeat;
animation-duration: 2s;/*动画时长*/
animation-timing-function: ease;/*动画执行一次*/
animation-delay: 0s;/*动画间隔*/
animation-direction: normal;/*动画正常播放*/
animation-fill-mode: both;/*动画保持在最后一帧*/
animation-iteration-count:;/*动画次数*/
animation-play-state: running;/*动画进行*/
animation-name: watchHand;/*动画名称*/
}
/*指针摆动效果*/
@-webkit-keyframes watchHand{
0% {
transform: rotate(0deg);
}
70% {
transform: rotate(253deg);
}
80% {
transform: rotate(248deg);
}
90% {
transform: rotate(251deg);
}
100% {
transform: rotate(250deg);/*旋转角度*/
}
}

3、数字翻动效果

/*数字翻动动画*/
.shuzi_1{
width: 40px;
height:50px;
position: absolute;
top: 400px;
left: 335px;
overflow: hidden;
background: url(../../img/watch_numb.png);
animation-duration: 1.5s;/*动画时长4s*/
animation-timing-function: steps(6, end);/*动画分为六部进行过渡,在完成6次过度停止*/
animation-delay: 0s;/*动画等待时间*/
animation-direction: normal;/*动画正常播放*/
animation-fill-mode: both;/*动画保持在最后一帧*/
animation-iteration-count:;/*动画次数*/
animation-play-state: running;/*动画进行*/
animation-name: watchNumb1;/*动画名称*/
}
@-webkit-keyframes watchNumb1{
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -300px;/*位置移动*/
}
}
.shuzi_2{
width: 40px;
height:50px;
position: absolute;
top: 400px;
left: 375px;
overflow: hidden;
background: url(../../img/watch_numb.png);
animation-duration: 0.5s;/*动画时长0.5s*/
animation-timing-function: steps(10, end);/*动画分为十部进行过渡,在完成十次过渡停止*/
animation-delay: 0s;/*动画等待时间*/
animation-direction: normal;/*动画正常播放*/
animation-fill-mode: none;/*动画正常进行*/
animation-iteration-count:;/*动画次数*/
animation-play-state: running;/*动画进行*/
animation-name: watchNumb2;/*动画名称*/
}
@-webkit-keyframes watchNumb2{
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -500px;/*位置移动*/
}
}

衍申:利用div的超出隐藏和position定位改变可以实现许多动画效果

animation动画汇总(一阶段项目)的更多相关文章

  1. Android Animation动画(很详细)

    Android Animation   Contents: Animations Tween Animations AnimationSet Interpolator Frame-By-Frame A ...

  2. Beta阶段项目展示博客

    Beta阶段项目展示 团队成员的简介 详细见团队简介 角色 姓名 照片 项目经理,策划 游心 策划 王子铭 策划 蔡帜 美工 赵晓宇 美工 王辰昱 开发.架构师 解小锐 开发 陈鑫 开发 李金奇 开发 ...

  3. [对对子队]Beta阶段项目展示博客

    Beta阶段项目展示博客 1 团队成员的简介和个人博客地址 成员 头像 岗位 博客 个人介绍 黄贤昊 PM 17373253 喜欢玩游戏和做游戏,项目经验基本都和游戏相关,擅长摸鱼,偶尔敬业. 吴桐雨 ...

  4. [对对子队]Alpha阶段项目展示博客

    Alpha阶段项目展示博客 1 团队成员的简介和个人博客地址 成员 头像 岗位 博客 个人介绍 黄贤昊 PM 17373253 喜欢玩游戏和做游戏,项目经验基本都和游戏相关,擅长摸鱼,偶尔敬业. 刘子 ...

  5. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  6. 【Android 基础】Animation 动画介绍和实现

    在前面PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animati ...

  7. Android Animation 动画Demo(Frame帧动画)

    上一页介绍Animation动画第一:Tween吐温动画. 本文介绍了以下Animation也有动画的形式:Frame帧动画. Frame动画是一系列照片示出的顺序按照一定的处理,和机制,以放电影很阶 ...

  8. [Android]Animation 动画介绍和实现

    Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animation由四种类型组成: XML中 alph 渐变透明度动画效果 sc ...

  9. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

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

随机推荐

  1. 实现MFC扩展DLL中导出类和对话框

    如果要编写模块化的软件,就要对对动态链接库(DLL)有一定的了解,本人这段时间在修改以前的软件时,决定把重复用的类和对话框做到DLL中,下面就从一个简单的例子讲起,如何实现MFC扩展DLL中导出类和对 ...

  2. HttPclient 以post方式发送json

    使用HttpClient 以POST的形式发送json字符串 步骤: 1.url .parameters 2.创建httpClient对象 3.创建HttpPost对象 4.为post对象设置参数 5 ...

  3. CSS布局之盒子模型[一]

    每个HTML标签都会生成一个盒模型,盒模型是正常流布局非常重要的概念.盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成. 1 ...

  4. ASP.NET MVC 中解决Session,Cookie等依赖的方式

    原文:https://blog.csdn.net/mzl87/article/details/90580869 本文将分别介绍在MVC中使用Filter和Model Binding两种方式来说明如何解 ...

  5. 栈的顺序存储和链式存储c语言实现

    一. 栈 栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储 栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...

  6. 别逃避,是时候来给JVM一记重锤了

    今天是猿灯塔“365天原创计划”第2天.   今天讲:   为什么写这个主题呢? 之前看到不少同学在讨论,     今天呢火星哥抽出点时间来帮大家整理一下关于JVM的一些知识点     一.JVM是什 ...

  7. 机器学习实战基础(十四):sklearn中的数据预处理和特征工程(七)特征选择 之 Filter过滤法(一) 方差过滤

    Filter过滤法 过滤方法通常用作预处理步骤,特征选择完全独立于任何机器学习算法.它是根据各种统计检验中的分数以及相关性的各项指标来选择特征 1 方差过滤 1.1 VarianceThreshold ...

  8. Java8——方法引用

    方法引用就是通过类名或方法名引用已经存在的方法来简化lambda表达式.那么什么时候需要用方法引用呢?如果lamdba体中的内容已经有方法实现了,我们就可以使用方法引用. 一.方法引用的三种语法格式 ...

  9. nginx极简教程

    Nginx 极简教程 本项目是一个 Nginx 极简教程,目的在于帮助新手快速入门 Nginx. examples 目录中的示例模拟了工作中的一些常用实战场景,并且都可以通过脚本一键式启动,让您可以快 ...

  10. 《串并行数据结构与算法(SML语言)实验》题解

    注意:本题解仅供参考学习,请勿直接抄袭代码,否则造成的后果和笔者无关. 第一题: 题意: 对n个数升序排序. 题解: 快排,不解释. 代码(省略了输入输出函数,下同): val n = getInt ...