css的各种动画
/*淡入*/
@keyframes fade-in {
0% {
opacity: 0;
}
/*初始状态 透明度为0*/
40% {
opacity: 0;
}
/*过渡状态 透明度为0*/
100% {
opacity: 1;
}
/*结束状态 透明度为1*/
} @-webkit-keyframes fade-in {
/*针对webkit内核*/
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
} .wrapper {
animation: fade-in; /*动画名称*/
animation-duration: 4.5s; /*动画持续时间*/
-webkit-animation: fade-in 1.5s; /*针对webkit内核*/
} /*由中间到两边*/
.center-spread {
animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
-moz-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
-webkit-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
-o-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
} @keyframes center-spread-keyframes {
0% {
opacity: 0;
transform: rotateY(70deg);
offset: 0
}
100% {
opacity: 1;
transform: rotateY(0deg);
offset: 1
}
} @-webkit-keyframes center-spread-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: rotateY(70deg);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: rotateY(0deg);
-webkit-offset: 1
}
} @-moz-keyframes center-spread-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: rotateY(70deg);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: rotateY(0deg);
-moz-offset: 1
}
} @-o-keyframes center-spread-keyframes {
0% {
-o-opacity: 0;
-o-transform: rotateY(70deg);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: rotateY(0deg);
-o-offset: 1
}
} @-ms-keyframes center-spread-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: rotateY(70deg);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: rotateY(0deg);
-ms-offset: 1
}
} /*由上到下并且延迟出现*/
.up-enter1 {
animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
-moz-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
-webkit-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
-o-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
} .up-enter2 {
animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
-moz-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
-webkit-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
-o-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
} @keyframes up-enter-keyframes {
0% {
opacity: 0;
transform: translateY(-300%);
offset: 0
}
100% {
opacity: 1;
transform: translateY(0);
offset: 1
}
} @-moz-keyframes up-enter-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: translateY(-300%);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: translateY(0);
-moz-offset: 1
}
} @-webkit-keyframes up-enter-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: translateY(-300%);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: translateY(0);
-webkit-offset: 1
}
} @-o-keyframes up-enter-keyframes {
0% {
-o-opacity: 0;
-o-transform: translateY(-300%);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: translateY(0);
-o-offset: 1
}
} @-ms-keyframes up-enter-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: translateY(-300%);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: translateY(0);
-ms-offset: 1
}
} /*反转出现*/
.reverse-enter {
animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
-moz-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
-webkit-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
-o-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
} /*一直反转*/
.reverse-infinite {
animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
-moz-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
-webkit-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
-o-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
} @keyframes reverse-enter-keyframes {
0% {
opacity: 0.1;
transform: rotateY(200deg);
offset: 0
}
100% {
opacity: 1;
transform: rotateY(0deg);
offset: 1
}
} @-moz-keyframes reverse-enter-keyframes {
0% {
-moz-opacity: 0.1;
-moz-transform: rotateY(200deg);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: rotateY(0deg);
-moz-offset: 1
}
} @-webkit-keyframes reverse-enter-keyframes {
0% {
-webkit-opacity: 0.1;
-webkit-transform: rotateY(200deg);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: rotateY(0deg);
-webkit-offset: 1
}
} @-o-keyframes reverse-enter-keyframes {
0% {
-o-opacity: 0.1;
-o-transform: rotateY(200deg);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: rotateY(0deg);
-o-offset: 1
}
} @-ms-keyframes reverse-enter-keyframes {
0% {
-ms-opacity: 0.1;
-ms-transform: rotateY(200deg);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: rotateY(0deg);
-ms-offset: 1
}
} /*由下往上出现*/
.down-enter1 {
animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
-moz-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
-webkit-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
-o-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
} .down-enter2 {
animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
-moz-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
-webkit-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
-o-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
} .down-enter3 {
animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
-moz-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
-webkit-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
-o-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
} .down-enter4 {
animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
-moz-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
-webkit-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
-o-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
} @keyframes down-enter-keyframes {
0% {
opacity: 0;
transform: translateY(300%);
offset: 0
}
100% {
opacity: 1;
transform: translateY(0%);
offset: 1
}
} @-moz-keyframes down-enter-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: translateY(300%);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: translateY(0%);
-moz-offset: 1
}
} @-webkit-keyframes down-enter-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: translateY(300%);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: translateY(0%);
-webkit-offset: 1
}
} @-o-keyframes down-enter-keyframes {
0% {
-o-opacity: 0;
-o-transform: translateY(300%);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: translateY(0%);
-o-offset: 1
}
} @-ms-keyframes down-enter-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: translateY(300%);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: translateY(0%);
-ms-offset: 1
}
} /*倾斜*/
.skew {
animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
-moz-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
-webkit-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
-o-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
} @keyframes skew-spread-keyframes {
0% {
opacity: 0;
transform: skewX(70deg);
offset: 0
}
100% {
opacity: 1;
transform: skewX(0deg);
offset: 1
}
} @-webkit-keyframes skew-spread-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: skewX(70deg);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: skewX(0deg);
-webkit-offset: 1
}
} @-moz-keyframes skew-spread-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: skewX(70deg);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: skewX(0deg);
-moz-offset: 1
}
} @-o-keyframes skew-spread-keyframes {
0% {
-o-opacity: 0;
-o-transform: skewX(70deg);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: skewX(0deg);
-o-offset: 1
}
} @-ms-keyframes skew-spread-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: skewX(70deg);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: skewX(0deg);
-ms-offset: 1
}
} /*旋转*/
.rotate {
animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
-moz-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
-webkit-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
-o-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
} @keyframes rotate-spread-keyframes {
0% {
opacity: 0;
transform: rotateY(70deg);
offset: 0
}
100% {
opacity: 1;
transform: rotateY(0deg);
offset: 1
}
} @-webkit-keyframes rotate-spread-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: rotateY(70deg);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: rotateY(0deg);
-webkit-offset: 1
}
} @-moz-keyframes rotate-spread-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: rotateY(70deg);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: rotateY(0deg);
-moz-offset: 1
}
} @-o-keyframes rotate-spread-keyframes {
0% {
-o-opacity: 0;
-o-transform: rotateY(70deg);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: rotateY(0deg);
-o-offset: 1
}
} @-ms-keyframes rotate-spread-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: rotateY(70deg);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: rotateY(0deg);
-ms-offset: 1
}
} /*位移*/
/*左边进入*/
.translateLeft {
animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
-moz-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
-webkit-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
-o-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
} @keyframes left-enter-keyframes {
0% {
opacity: 0;
transform: translateX(-100%);
offset: 0
}
100% {
opacity: 1;
transform: translateX(0%);
offset: 1
}
} @-moz-keyframes left-enter-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: translateX(-100%);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: translateX(0%);
-moz-offset: 1
}
} @-webkit-keyframes left-enter-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: translateX(-100%);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: translateX(0%);
-webkit-offset: 1
}
} @-o-keyframes left-enter-keyframes {
0% {
-o-opacity: 0;
-o-transform: translateX(-100%);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: translateX(0%);
-o-offset: 1
}
} @-ms-keyframes left-enter-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: translateX(-100%);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: translateX(0%);
-ms-offset: 1
}
} /*右边进入*/
.translateRight {
animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
-moz-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
-webkit-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
-o-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
} @keyframes right-enter-keyframes {
0% {
opacity: 0;
transform: translateX(100%);
offset: 0
}
100% {
opacity: 1;
transform: translateX(0%);
offset: 1
}
} @-moz-keyframes right-enter-keyframes {
0% {
-moz-opacity: 0;
-moz-transform: translateX(100%);
-moz-offset: 0
}
100% {
-moz-opacity: 1;
-moz-transform: translateX(0%);
-moz-offset: 1
}
} @-webkit-keyframes right-enter-keyframes {
0% {
-webkit-opacity: 0;
-webkit-transform: translateX(100%);
-webkit-offset: 0
}
100% {
-webkit-opacity: 1;
-webkit-transform: translateX(0%);
-webkit-offset: 1
}
} @-o-keyframes right-enter-keyframes {
0% {
-o-opacity: 0;
-o-transform: translateX(100%);
-o-offset: 0
}
100% {
-o-opacity: 1;
-o-transform: translateX(0%);
-o-offset: 1
}
} @-ms-keyframes right-enter-keyframes {
0% {
-ms-opacity: 0;
-ms-transform: translateX(100%);
-ms-offset: 0
}
100% {
-ms-opacity: 1;
-ms-transform: translateX(0%);
-ms-offset: 1
}
} /*左右摆动*/
@keyframes mylogo {
from {
left: 5px;
}
to {
left: -5px;
}
} @-moz-keyframes mylogo /* Firefox */
{
from {
left: 5px;
}
to {
left: -5px;
}
} @-webkit-keyframes mylogo /* Safari 和 Chrome */
{
from {
left: 5px;
}
to {
left: -5px;
}
} @-o-keyframes mylogo /* Opera */
{
from {
left: 5px;
}
to {
left: -5px;
}
} .imagelogo {
background: url(images/logo.png) no-repeat;
float: left;
position:relative;
width: 180px;
height: 60px;
margin: 15px 0px 0px 0px;
padding: 0px;
cursor: pointer;
animation: mylogo 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: mylogo 1s linear 0s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: mylogo 1s linear 0s infinite alternate;
/* Opera: */
-o-animation: mylogo 1s linear 0s infinite alternate;
}
/*由大变小*/
.avatar{
display: block;
width:100%;
animation: avatar 2000ms ease 0ms 1 forwards;
-moz-animation:avatar 2000ms ease 0ms 1 forwards;
-webkit-animation:avatar 2000ms ease 0ms 1 forwards;
-o-animation:avatar 2000ms ease 0ms 1 forwards;
}
@-webkit-keyframes avatar {
0% {
-webkit-opacity: 0;
-webkit-transform: scale(1.3)
}
100% {
-webkit-opacity: 1;
-webkit-transform: scale(1)
}
} @-moz-keyframes avatar {
0% {
-moz-opacity: 0;
-moz-transform: scale(1.3)
}
100% {
-moz-opacity: 1;
-moz-transform: scale(1)
}
}
@-ms-keyframes avatar {
0% {
-ms-opacity: 0;
-ms-transform: scale(1.3)
}
100% {
-ms-opacity: 1;
-ms-transform: scale(1)
}
}
@-o-keyframes avatar {
0% {
-o-opacity: 0;
-o-transform: scale(1.3)
}
100% {
-o-opacity: 1;
-o-transform: scale(1)
}
}
@keyframes avatar {
0% {
opacity: 0;
transform: scale(1.3)
}
100% {
opacity: 1;
transform: scale(1)
}
}
css的各种动画的更多相关文章
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能
个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...
- 简单CSS实现闪烁动画（+1白话讲解）
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- CSS 加载动画
CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
随机推荐
- linux常用命令 echo输出命令
echo输出命令 'echo [选项] [输出内容]' 选项 '-e' 支持反斜线控制的字符转换 控制字符 \a 输出警告音 \b 退格键,也就是向左删除键 \n 换行符 \r 回车键 \t 制表符 ...
- MySQL— pymysql模块（防止sql注入），可视化软件Navicat
一.Pymysql import pymysql #python2.X 中是 mysqldb 和 pythonmysql 用法是一模一样的 #pymysql可以伪装成上面这两个模块 user = in ...
- Spring详解
https://gitee.com/xiaomosheng888老师的码云 1.核心容器:核心容器提供 Spring 框架的基本功能(Spring Core).核心容器的主要组件是 BeanFacto ...
- For in + 定时器
Fon in for/in 语句用于循环对象属性. 循环中的代码每执行一次,就会对对数组的元素对象的属性进行一次操作. <p id = "demo"><p> ...
- 七、Linux的权限命令
1． 文件权限 r:对文件是指可读取内容 对目录是可以ls w:对文件是指可修改文件内容,对目录 是指可以在其中创建或删除子节点(目录或文件) x:对文件是指是否可以运行这个文件,对目录是指是否可以c ...
- win10系统开机输入密码黑屏解决方法
方法一: 第一步:首先打开笔记本电脑开机,输入开机密码进入 第二步:输入密码后显示黑屏,按"Ctrl+Alt+Del"组合键打开任务管理器 第三步:在打开的任务管理器中,点击&qu ...
- 【Appium】Appium工作原理(2)
Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬. 大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/6922 ...
- 原生Ajax实现异步交互
实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...
- DevExpress WinForms使用教程：皮肤颜色和LookAndFeel
[DevExpress WinForms v18.2下载] v18.2版本中更改了控制背景颜色和皮肤一起处理的方式.在v18.1中引入了Project Settings页面,其中包含一个skin se ...
- c#分布式ID生成器
c#分布式ID生成器 简介 这个是根据twitter的snowflake来写的.这里有中文的介绍. 如上图所示,一个64位ID,除了最左边的符号位不用(固定为0,以保证生成的ID都是正数),还剩余 ...