css3 keyframes zoom,CSS3 @keyframes 规则 | w3cschool菜鸟教程
CSS3 @keyframes 规则
实例
使一个div元素逐渐移动200像素:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
尝试一下 »
在此页底部有更多的例子。
浏览器支持
Internet Explorer 10, Firefox, 和 Opera 支持 @keyframes 属性.
Safari和Chrome使用私有属性@-WebKit-keyframes支持。
注意:Internet Explorer 9及更早IE版本不支持@keyframes 属性.
标签定义及使用说明
使用@keyframes规则,你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中,您可以更改CSS样式的设定多次。
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。
0%是开头动画,100%是当动画完成。
为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。
注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.
语法
@keyframes animationname{keyframes-selector{css-styles;}}
值 说明
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
合法值:
0-100%
from (和0%相同)
to (和100%相同)
注意: 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性
在线实例
实例
许多关键帧选择器中添加一个动画:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
尝试一下 »
实例
Change many CSS styles in one animation:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
尝试一下 »
实例
Many keyframe selectors with many CSS styles:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
尝试一下 »
相关文章
CSS3 tutorial: CSS3 动画
css3 keyframes zoom,CSS3 @keyframes 规则 | w3cschool菜鸟教程相关推荐
- w3cschool菜鸟教程离线版chm手册正式发布
w3cschool菜鸟教程是一个提供了最全的的web技术基础教程网站.网站包含了HTML教程.CSS教程.Javascript教程.PHP教程等各种建站基础教程.同时也提供了大量的在线实例,通过实例, ...
- JS实例学习笔记——w3cschool+菜鸟教程
基础实例--w3cschool write() document.write("this is a string");//生成普通文本 document.write("& ...
- css3 keyframes zoom,CSS3通过@keyframes创建动画
本文主要和大家介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 定义: 通过 @keyfram ...
- html的post和get请求参数,HTTP 方法:GET 对比 POST | w3cschool菜鸟教程
HTTP 方法:GET 对比 POST 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 HTTP ? 超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信. HTTP 的 ...
- w3cschool oracle,AJAX 数据库 | w3cschool菜鸟教程
AJAX Database 实例 AJAX 可用来与数据库进行动态通信. AJAX 数据库实例 下面的例子将演示网页如何通过 AJAX 从数据库读取信息: 请在下面的下拉列表中选择一个客户: Exam ...
- php里建立数据库和表,PHP 创建数据库和表 | w3cschool菜鸟教程
PHP 创建数据库和表 数据库存有一个或多个表. 创建数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 我们必须添加 CREATE DATABASE 语句到 mysqli ...
- html图像区域映射菜鸟,HTML area 标签 | w3cschool菜鸟教程
HTML 标签 实例 带有可点击区域的图像映射: usemap="#planetmap"> 尝试一下 » 浏览器支持 所有主流浏览器都支持 标签. 标签定义及使用说明 标签定 ...
- PHP与MySQL连接菜鸟教程_PHP 连接 MySQL 数据库 | w3cschool菜鸟教程
PHP 连接 MySQL 数据库 使用 PHP mysqli_connect() 函数连接到一个 MySQL 数据库. 连接到一个 MySQL 数据库 在我们访问数据库中的数据之前,我们必须创建一个到 ...
- HTML5 Canvas | w3cschool菜鸟教程
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...
最新文章
- python re.match、re.search以及re.findall的区别
- 排球赛程序(个人作业)
- centos 安装mysql5.7_Zabbix 4.2.5 安装部署实践详解
- 避免入坑:如何知道一个导师的人品?
- 一个文件下载的工具类
- IDEA开发工具的学习
- 原型万事通,你想知道(但不敢问)的都在这里
- svn unable to connect to a repository at url 执行上下文错误 不能访问SVN服务器问题
- golang 连接多个mysql_Prometheus+Grafana监控MySQL
- 打造黑苹果(六)设置无线网卡上网
- 艾孜尔江_国二MS Office考试Excel函数常考知识点
- 实验室信息管理系统是基础软件吗
- 第9章 课后作业
- hp 服务器 无线网卡,惠普HP 615 无线网卡驱动
- 工业设计三维软件有哪些?
- k8s calico 插件错误:Calico node 'node4' is already using the IPv4 address 172.19.0.1.
- C#串口开发案例:迈瑞血球分析仪
- 红米K40游戏 红米Note10Pro等出现dm-verity corruption your device is corrupt 设备在5秒内关机 无限重启 怎么解决
- 论文写作:如何选研究题目?
- mysql 查询上一周每一天的数据(含跨年问题)
热门文章
- 利用matlab实现DMD动态模态分解(在一维信号或二维流场矢量中的应用)
- 资本论第一卷思维导图
- mysqlcp30下载最新jar包_三星S20FE刷机包(系统升级刷机最新官方固件包下载)
- Java Robocode 以示例wall为基准的一个坦克
- Hbase思维导图之物理模型
- 50多个开源PDF阅读编辑工具汇总
- ffmpeg下载安装的步骤
- Python--Flask在使用 SQLAlchemy出现'SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and '
- Selenium IDE介绍
- 181216 MacOs上如何将多页PDF文件合成打印在一张PDF表单上面