动画（重点）~~~~~

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1 定义

/* 1. 定义的动画 */
@keyframes dance {from {transform: scale(1)}to {transform: scale(1.5)}
}

或者是

/* 1. 定义的动画 */@keyframes dance {0% {transform: scale(1)} 100% {transform: scale(1.5)}}

2 调用

img {width: 200px;/* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/animation: dance .5s infinite;
}

1 动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态
linear 让动画匀速执行

1.1 鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {animation-play-state: paused;
}

1.2 多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

动画（重点）~~~~~相关推荐

UI设计师SVG动画进阶篇——路径变形动画（上篇）
之前分享了一些自己平时整理的可以通用的SVG动画的教程基本都是最基础的变化,旋转也好,缩放也好,沿路径运动也好,只需要定义CSS3的一些动画属性值或者SVG的动画属性标签,当然,运用得当的话,依靠这些 ...
css动画--吃豆豆
完全不用js也能写出很好看的css动画重点用到的就是**@keyframes和animation**这两个让他们动起来盒子阴影box-shadow: 300px 0px 0px -80px whi ...
中学计算机教材,人教版初中信息技术教材梳理
<人教版初中信息技术教材梳理>由会员分享,可在线阅读,更多相关<人教版初中信息技术教材梳理(17页珍藏版)>请在人人文库网上搜索. 1.初中信息技术教材梳理授课年级:七.八.九 ...
用 Go STL 查询 DB 引发的内存泄露
本文字数:5295 字精读时间:10 分钟也可在 5 分钟内完成速读问题起因这几天有一个 Go API service 经过定时监控发现占用的内存不断上涨,内存从初始的 70M 一直上升到超过 ...
Android MediaPlayer MP3播放器(倍速和音量)的封装和所见的问题
Android MediaPlayer MP3播放器(倍速和音量)的封装和所见的问题文章目录 Android MediaPlayer MP3播放器(倍速和音量)的封装和所见的问题一.技术选型二. ...
iOS开发的经典博客和文章汇总
官方文档马上着手开发 iOS 应用程序(官方) https://developer.apple.com/library/ios/referencelibrary/GettingStarted/Roa ...
JavaScript进阶学习-webAPI（总结）
webAPI DOM 概念 JS分三个部分: ECMAScript标准:js的基本语法 DOM:Document object model -文档对象模型-操作页面的元素 BOM: Browser o ...
U3D《真正的大冒险》（下）精讲教学
如果这些内容对你有用,请做一棵蒲公英让知识的种子随风植入人的心里. 在下篇中我们将讲解UI界面的关系与玩家在场景中陷阱交互的机制. 另外给大家推荐一个做动画不错的插件叫做DOTween,http:// ...
iOS开发的经典博客和文章汇总【原创】
官方文档苹果官方demo https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/Und ...
intouch读取西门子PLC数据
** 1.西门子读取300的plc 除框选外其余地方都默认就好, 此处添加的名字是intouch里面访问名的主题名字(此处手动画重点,不是访问名,是访问名中的主题名,间下图) 可以访问名和主题名字写相 ...

动画（重点）~~~~~

1 动画属性

动画（重点）~~~~~相关推荐

最新文章

热门文章