- CSS 教程
- CSS - 主页
- CSS - 简介
- CSS - 语法
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 边距
- CSS - 列表
- CSS - 填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS-Clearfix
- CSS-浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 翻译
- CSS - 高度
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS-根
- CSS - 盒子模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS 高级
- CSS-弹性盒
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 媒体类型
- CSS - 分页媒体
- CSS-听觉媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - 重要
- CSS3 教程
- CSS3 - 教程
- CSS3 - 圆角
- CSS3 - 边框图像
- CSS3 - 多背景
- CSS3 - 颜色
- CSS3 - 渐变
- CSS3 - 阴影
- CSS3 - 文本
- CSS3 - 网页字体
- CSS3 - 二维变换
- CSS3 - 3D 变换
- CSS3 - 动画
- CSS3 - 多列
- CSS3 - 用户界面
- CSS3 - 盒子尺寸
- CSS 响应式
- CSS - 响应式网页设计
- CSS 资源
- CSS - 有用的资源
- CSS - 讨论
CSS3 - 动画
动画是改变形状并用元素创建运动的过程。
@关键帧
关键帧将控制 CSS3 中的中间动画步骤。
带有左侧动画的关键帧示例 -
@keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }
上面的示例使用关键帧语法显示了动画的高度、宽度、颜色、名称和持续时间。
向左移动动画
<html> <head> <style type = "text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>this is an example of moving left animation .</p> <button onclick = "myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
它将产生以下结果 -
使用关键帧向左移动动画
<html> <head> <style type = "text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>This is an example of animation left with an extra keyframe to make text changes.</p> <button onclick = "myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
它将产生以下结果 -