CSS中div平行移动，即轻微动画效果的使用

让div平行移动的方法

使 div 元素匀速向下移动：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

值

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

CSS中div平行移动，即轻微动画效果的使用相关推荐

html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
jQuery中的视图样式和动画效果
视图样式 height() / width(): 获取匹配元素的当前计算高 / 宽度值. .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值(例如,400),前 ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
css中div的意思是什么
css中"div"表示一种选择器,可以直接使用div标签选择器来查找HTML元素设置样式:而如果是".div",那么表示某个标签的class属性即类选择器. c ...
CSS实现内容旋转向下移动的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容旋转向下移动的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文 ...
[css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...

CSS中div平行移动，即轻微动画效果的使用

让div平行移动的方法

定义和用法

语法

CSS中div平行移动，即轻微动画效果的使用相关推荐

最新文章

热门文章