文档章节

Web 开发之H5 Animation动画效果

落叶挽歌
 落叶挽歌
发布于 2017/07/02 17:08
字数 241
阅读 72
收藏 0

animation 属性是一个简写属性,用于设置六个动画属性: animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。

和Transition类似有两种实现方法 第一种方法: -webkit-animation: mycolor 5s linear infinite; 第二种方法: -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;

示例代码

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title>Transition示例</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background-color: aqua;
                text-align: center;
            }
            @-webkit-keyframes mycolor {
                0%{
                    background-color: aqua;
                    transform: rotate(0deg);
                    border-radius: 0%;
                }
                40%{
                    background-color: rebeccapurple;
                    transform: rotate(45deg);
                    border-radius: 20%;
                }
                70%{
                    background-color: #888888;
                    transform: rotate(-45deg);
                    border-radius: 35%;
                }
                100%{
                    background-color: aqua;
                    transform: rotate(1000deg);
                    border-radius: 50%;
                }
            }
            div:hover{
                /*-webkit-animation-name: mycolor;*/
                /*-webkit-animation-duration: 5s;*/
                /*-webkit-animation-iteration-count: infinite;*/
                /*-webkit-animation-timing-function: linear;*/
                -webkit-animation: mycolor 5s linear infinite;

            }
        </style>
    </head>
    <body>
        <div class="div1">示例</div>

    </body>
</html>






© 著作权归作者所有

落叶挽歌

落叶挽歌

粉丝 0
博文 38
码字总数 23891
作品 0
温州
Android工程师
私信 提问
【Hello CSS】第九章-如何画一个体验更好的动画?

作者:陈大鱼头 github: KRISACHAN 在上一节中, 不走心 地画了一些 CSS图案 ,本节就继续不走心地 画动画 。 CSS的动画属性 在CSS中, 、 跟 使我们常用于制作动画的属性,我们先来大致地来...

陈大鱼头
07/17
0
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
android加载框效果《IT蓝豹》

android加载框效果 android加载框效果,本例子有几种效果弹出dialog,本例子主要自定义SVProgressHUD 类, 本例子来源:https://github.com/saiwu-bigkoo/Android-SVProgressHUD 主要代码如下...

抉择很难
2015/10/27
475
0
从手机端 H5 制作来看 WEB 动画的术与道

我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式。企业商户对于这种方式也很有好感,...

ES2049
03/05
0
0
原生开发移动web单页面(step by step)7——页面切换动画

在开始写页面切换效果前,首先要介绍一下css3的animation模块,在css中定义如下 css3的animation定义可以声明关键名,动画时间,动画插值方式,动画的延迟以及动画完毕后的状态以及动画次数。...

真五花肉
2018/09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashMap源码分析

read

V丶zxw
36分钟前
4
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
54分钟前
5
0
【JS复习笔记】03 继承(从ES5到ES6)

本文转载于:专业的前端网站➫【JS复习笔记】03 继承(从ES5到ES6) 前言 很久以前学习《Javascript语言精粹》时,写过一个关于js的系列学习笔记。 最近又跟别人讲什么原型和继承什么的,发现...

前端老手
58分钟前
8
0
简单动态网站搭建

如何在windows服务器上配置wordPress和discuz 网站建设中的概念讲解 网站建设的基础操作 网站程序的基础使用 网站程序的优化 简单动态网站搭建 软件部署 域名和主机的购买 域名解析 环境部署...

达达前端小酒馆
今天
6
0
Java每日面试题_03

15、构造器是否可被override constructor(构造器)不能被继承,所以不能被override(重写),但是可以被overloading(重载)。 16、抽象类和接口的区别 抽象类是什么 含有abstract修饰符的class即...

庭前云落
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部