文档章节

Web 开发之H5 Transition动画变换

落叶挽歌
 落叶挽歌
发布于 2017/07/02 16:20
字数 236
阅读 29
收藏 0

transition 属性是一个简写属性,用于设置四个过渡属性: transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。

注意: transition-duration 属性必须设置,否则默认为0s表示不执行

**语法:**transition: property duration timing-function delay;

第一种方式:

            transition-property: background-color,width,height,transform;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay:0.5s;

第二种方式: transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

示例源代码

<!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;
            }
            .div1{

                /*transition-property: background-color,width,height,transform;*/
                /*transition-duration: 2s;*/
                /*transition-timing-function: linear;*/
                /*transition-delay:0.5s;*/
                transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

            }
            .div1:hover{
                background-color: fuchsia;
                width: 500px;
                height:500px;
                transform: rotate(63000deg);
            }
        </style>
    </head>
    <body>
        <div class="div1">示例</div>
    </body>
</html>



© 著作权归作者所有

落叶挽歌
粉丝 0
博文 31
码字总数 16116
作品 0
温州
Android工程师
私信 提问
干货分享!HTML5 动效的常见制作手法

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

腾讯ISUX - 田田
2015/12/08
0
0
面试官: css3动画了解吗? 我: .......

transition(过渡) 允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 主要包含四个属性值...

nanfeiyan
05/21
0
0
对transition,transform,animation的疑惑

名词解释 我们先来看一下百度翻译 最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说). 恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚...

boogoogle
2016/06/14
37
0
Activity转场动画(5.0+)

设置transitionName 首先,我们需要选定变换开始和结束的元素,给它们设置一个相同的, 我这个例子中,开始变换的元素是列表中的图片 <ImageView 开始变换的元素是图书明细界面中的图片 <Ima...

火云
2016/12/22
19
0
CSS3 Transitions, Transforms和Animation使用简介与应用展示

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。...

黄金林
2016/12/21
7
0

没有更多内容

加载失败,请刷新页面

加载更多

FastDateFormat 研究

FastDateFormat 对缓存的利用,其实就是用ConcurrentHashMap 做了一个map类型的缓存 public F getInstance(final String pattern, TimeZone timeZone, Locale locale) { Validate......

暗中观察
15分钟前
0
0
Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
4
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
10
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
5
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部