css3动画知识点

杨龙飞

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

无限循环动画

.content .light{position:absolute;right:0px;background:white;-webkit-animation: twinkling1 1s infinite ease-in-out;animation: twinkling1 1s infinite ease-in-out;box-sizing:border-box;border:3px solid white;}

@keyframes twinkling1 {
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-moz-keyframes twinkling1 /* Firefox */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

@-webkit-keyframes twinkling1 /* Safari 和 Chrome */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

@-o-keyframes twinkling1 /* Opera */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

css3动画知识点的更多相关文章

myslide 插件开发知识点总结和 css3 动画性能问题的研究
myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...
用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
CSS3主要知识点复习总结+HTML5新增标签
文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...
显示层封装及实现与优化（无动画+css3动画+js动画）
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址下面 ...
CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例先来看看左边加了st ...
用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

MySql学习(七) —— 查询性能优化深入理解MySql如何执行查询
本篇深入了解查询优化和服务器的内部机制,了解MySql如何执行特定查询,从中也可以知道如何更改查询执行计划,当我们深入理解MySql如何真正地执行查询,明白高效和低效的真正含义,在实际应用中就能扬长避 ...
JS冒号的作用
JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book = { Name: '法', Price: 100, Discount : functi ...
FZU 2167 大王叫我来巡山呐
Problem 2167 大王叫我来巡山呐 Accept: 931 Submit: 1405Time Limit: 1000 mSec Memory Limit : 32768 KB Pr ...
iOS企业版APP分发上线流程和注意事项
0.准备 1]$299/year的企业级开发账号. 2]制作分发证书和描述文件,并下载安装到本机. 3]Xcode编译通过,真机测试通过的源码. 1.打包前配置 1]Xcode 打开项目,common ...
GCD（关于容斥原理）
Problem Description Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD( ...
List<bean>转换Jsonarray知识心得
使用基本的jdbc连接mysql,获取数据. 创建实体类user: package com.json; public class user { private int id; private Stri ...
private关键字实现控制新建类数量
private关键字作为一个重要的关键字,我们在开发中会经常用到,可是你有没有想过通过private关键字我们可以创建一个别人无法通过new来新建的类呢?下面我们就来看一下: package retu ...
对JS关于对象创建的几种方式的整理
最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object();Person.na ...
SpringBoot + SwaggerUI
后台写接口,由于要提供接口文档给前台使用,所有研究了一下swagger,看到网上有篇文章写得不错,就直接拿过来了. swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确测试 ...
Java对象序列化的使用和定制
序列化的概念及使用场合序列化就是把对象转化为字节序列并持久化保存,可以保存在内存中.磁盘文件系统,甚至通过网络传递,并能够在以后将这个字节序列完全恢复为原来的对象. 对象序列化的概念引入Java是为 ...

css3动画知识点

杨龙飞

杨龙飞

杨龙飞

杨龙飞

杨龙飞

css3动画知识点的更多相关文章

随机推荐

热门专题