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. .net Core中如何读取Appsetting配置文件

    现在APPSetting下面配置以下节点 { "Logging": { "IncludeScopes": false, "LogLevel" ...

  2. Redis系列(八):发布与订阅

    Redis的发布与订阅,有点类似于消息队列,发送者往频道发送消息,频道的订阅者接收消息. 1. 发布与订阅示例 首先,在本机开启第1个Redis客户端,执行如下命令订阅blog.redis频道: SU ...

  3. ES11来了,还学得动吗?

    写在前面 ES2020(即 ES11)上周(2020 年 6 月)已经正式发布,在此之前进入 Stage 4 的 10 项提案均已纳入规范,成为 JavaScript 语言的新特性 一.特性一览 ES ...

  4. \\u4e00-\\u9fa5\

    select * from stu where name regexp '[\\u4e00-\\u9fa5\·]{2,10}$'; 结果: name这个字段从后到前 2 到10个字符之内 如果有汉字 ...

  5. python_Linux系统的常用命令(三)

    用户权限常用命令 1.用户和权限 r--读--4, w--写--2, x--执行--1 chmod 可以修改用户/组对文件/目录的权限 格式:chmod +/-rwx 文件名/目录名 su -用户:切 ...

  6. Mysql中Union和OR性能对比

    博客已搬家,更多内容查看https://liangyongrui.github.io/ Mysql中Union和OR性能对比 在leetcode上看到一篇文章,整理一下 参考:https://leet ...

  7. sql-exists、not exists的用法

    exists : 强调的是是否返回结果集,不要求知道返回什么, 比如:select name from student where sex = 'm' and mark exists(select 1 ...

  8. 链表中倒数第k个节点(剑指offer-14)

    /* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; } }*/ ...

  9. WPF 设置帧率

    开始仔细学习WPF了 说是动画不流畅,可以通过设置帧率解决,查了很多,都说设置Timeline.DesiredFrameRateProperty, 但都没说加到哪里,在代码很多地方加上了,统统无效.最 ...

  10. 仿Neo4j里的知识图谱,利用d3+vue开发的一个网络拓扑图

    项目需要画一个类似知识图谱的节点关系图. 一开始用的是echart画的. 根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单 ...