使用百分比的方式让方块在规定时间内完成对应动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 133s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0%{
background-color: #ffc602
}
20%{
background-color: #1363bc;
-webkit-transform: translateY(-10px);
height: 210px;
}
40%{
background-color: #cf0fff;
-webkit-transform: translateY(-20px);
height: 220px
}
60%{
background-color: #810977;
-webkit-transform: translateY(-30px);
height: 230px
}
80%{
background-color: #c91f10;
-webkit-transform: translateY(-40px);
height: 240px
}
100%{
background-color: #ffc602;
-webkit-transform: translateY(-50px);
height: 250px
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0%{
background-color: #ffc602
}
20%{
background-color: #1363bc;
-webkit-transform: translateY(-10px);
height: 210px;
}
40%{
background-color: #cf0fff;
-webkit-transform: translateY(-20px);
height: 220px
}
60%{
background-color: #810977;
-webkit-transform: translateY(-30px);
height: 230px
}
80%{
background-color: #c91f10;
-webkit-transform: translateY(-40px);
height: 240px
}
100%{
background-color: #ffc602;
-webkit-transform: translateY(-50px);
height: 250px
}
}
</style>
</head>
<body>
<p><strong>注意:</strong> @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>
分享到：
相关推荐
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作...
5. **CSS动画模式**：利用`@keyframes`定义动画，并通过`animation`属性将动画应用到元素，创建丰富的交互效果。 这个压缩包的文件列表“pro-html5-css3-design-patterns-master”可能包括了各个设计模式的示例代码...
CSS3动画通过`@keyframes`规则定义了一个动画的过程，从起始状态到结束状态的各个阶段都可以被精细控制。例如： ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } ``` 这段代码定义了一个...
React本机缓和关键帧 在React Native中创建基于CSS关键帧的动画安装yarn add react-native-easing-keyframes 或者npm install react-native-easing-keyframes我为什么需要这个？ 通常在动画中，缓动功能将应用于动画...
2. **3D坐标系**：CSS3中的3D转换是基于一个虚拟的3D坐标系，元素的位置和旋转都是相对于这个坐标系进行的。X轴横向，Y轴纵向，Z轴则从屏幕向观察者方向延伸。 3. **旋转（rotation）**：结合rotateX, rotateY和...
**CSS3 3D旋转与色子应用** 在现代网页设计中，CSS3引入了许多新的特性和功能，其中3D变换是极具创新性的一项。3D旋转让元素能够在三维空间中展示动态效果，极大地增强了用户体验。本项目"css3-3d旋转-色子"就是对...
在IT领域，CSS3是一种强大的样式表语言，用于定义网页的布局、颜色、字体等视觉效果。本主题聚焦于“css3-弹出窗口弹出效果”，这涉及到网页交互设计中的一个重要方面，即如何通过CSS3实现吸引用户的动态提示或信息...
在H5（HTML5）和CSS3中，`@keyframes`规则是创建动画的核心工具。这个技术允许我们定义一个动画的过程，从开始到结束的...同时，`@keyframes`与CSS3的其他特性（如`transition`）配合使用，可以实现更细腻的交互设计。
此外，为了增强用户体验，还可以结合其他CSS3属性，如动画（@keyframes）、过渡（transition）等，使颜色变换更加平滑流畅。 总的来说，“css3-image-gradient-hover.zip”提供的内容可能是一个实用的教学资源，...
《CSS3辉光线条加载效果详解》 在现代网页设计中，动态加载效果已经成为提升用户体验的重要元素之一。"css3-shine-line-loading"是一个利用CSS3实现的辉光线条加载效果，它以其独特的视觉魅力和流畅的动画效果，...
在CSS3中，动画功能是通过一系列关键帧（keyframes）定义的，可以创建平滑过渡和复杂的运动路径。`@keyframes`规则用于定义元素从一种样式变化到另一种样式的整个过程。例如，我们可以为Tom猫的眼睛眨眼、尾巴摇摆...
《CSS3：青蛙表情的魔法世界》 在数字化的今天，网页设计的视觉表现力越来越受到重视，而CSS3作为现代网页设计的核心技术之一，无疑为设计师提供了无尽的创意可能。当我们谈论“css3-frog-expression.zip”时，我们...
2. **CSS3动画**：关键帧动画（@keyframes）是CSS3的一大亮点，它允许开发者定义一个动画的起始状态和结束状态，以及在动画过程中各阶段的状态。在这个女孩摆动动画中，@keyframes可能会定义女孩从左至右、从右至左...
CSS3动画允许开发者定义一系列关键帧，从而控制元素在特定时间内的状态变化，形成平滑的动画效果。这可以通过`@keyframes`规则来定义，例如： ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1;...
CSS3的动画功能则可以轻松地控制这些变化，例如通过`@keyframes`规则定义动画的关键帧，然后应用到SVG元素上，实现平滑的过渡效果。 具体到"svg-css3-loading-icons-易语言.rar"这个子文件，可能是包含了以下内容：...
标题中的“pure-css3-light-ring-loading-易语言.zip”表明这是一个使用纯CSS3技术实现的轻量级环形加载效果的资源包，适用于易语言编程环境。易语言是中国自主研发的一种简单易学的编程语言，其目标是降低广大用户...
2. **应用3D转换**：在CSS中，我们为`.folded-text-container`设置`perspective`属性，它定义了观察者与3D空间之间的距离，影响元素的透视效果。然后，为每个字母应用3D旋转和平移。 ```css .folded-text-container...
2. 使用CSS3选择器选中各个SVG元素，设置初始样式。 3. 创建`@keyframes`规则，定义自行车在不同时间点的位置、角度变化。 4. 应用`animation`属性，指定动画名称、时长、延迟、填充模式等参数。 易语言（E ...
1. **@keyframes规则**: CSS3动画的核心在于`@keyframes`规则，它定义了动画从开始到结束的各个阶段。例如： ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } ``` 这段代码创建了一...
默认的导出包装在情感的keyframes ，但是您也可以导出{ spring } ，它返回一个数组，您可以将其加入并与其他css-in-js解决方案一起使用。 （我认为...） 注意：对于刻度，请确保使用更高的精度，例如4。 例子 此...