文档章节

CSS transition动画没效果

落叶伴长风
 落叶伴长风
发布于 2016/12/01 09:46
字数 212
阅读 53
收藏 0
点赞 0
评论 0

今天在使用transition 的时候发现没效果,代码如下

当鼠标移动到.m1选中的div .m2 移动时有过度效果 但是缺没有效果

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }


    .m1{

        background-color: #aaa;

    }
    .m2{
        position: relative;
        background-color: #bbb;
        transition: all 0.4s ease-in; /*属性 时间 动作效果 .延迟.*/
 
    }
    .m1:hover .m2{
        left: 200px;
    }
    </style>



</head>

<body >
    <div class="m1" style="height: 300px; width: 200px;">
        <div class="m2" style="height: 100px; width: 90px;">

        </div>

    </div>

</body>

</html>

后来发现原来需要给属性添加一个初始值,效果才会被激发

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }


    .m1{

        background-color: #aaa;

    }
    .m2{
        position: relative;
        background-color: #bbb;
        transition: all 0.4s ease-in;
       left:0; /*一定要加上*/
 
    }
    .m1:hover .m2{
        left: 200px;
    }
    </style>



</head>

<body >
    <div class="m1" style="height: 300px; width: 200px;">
        <div class="m2" style="height: 100px; width: 90px;">

        </div>

    </div>

</body>

</html>

 

© 著作权归作者所有

共有 人打赏支持
落叶伴长风
粉丝 0
博文 61
码字总数 7974
作品 0
南昌
程序员
CSS动画:animation、transition、transform、translate傻傻分不清

本文首发于我的博客网站:Vince's Blog 前言 在平时开发过程中,由于都是自己捣鼓玩的项目,并没有UI设计给我的设计图,更没有什么特效要求,导致对css动画一直都不是很熟悉,但是作为即将进入...

Vince_ ⋅ 06/03 ⋅ 0

CSS动画简介

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 本文介绍CSS动画的两大组成部分:transition和animation。我不打算给出每一条属...

阮一峰 ⋅ 2014/02/14 ⋅ 0

CSS3 Transitions, Transforms和Animation使用简介与应用展示

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

黄金林 ⋅ 2016/12/21 ⋅ 0

css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能...

lovethe51cto ⋅ 2016/01/12 ⋅ 0

CSS3 transition实现超酷动画效果

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了...

coko ⋅ 2013/08/15 ⋅ 0

css动画 简单的记录

1.transiton 指定状态变化所需要的时间 鼠标经过可以看到,2秒内 宽度变成200px 可以指定特定属性有这个样式 高度在1秒内过度改变。 transition有四个属性 transition-property:应用过渡的 CS...

hey卷 ⋅ 2016/07/21 ⋅ 0

Css3系列-动画基础

css3为我们提供了强大的动画功能,我们可以借助改变其他css属性;css3除了借助最常用css属性,要想实现更加漂亮的动画,结合css3的变换属性必可不少。 介绍css3的动画之前: transform 变换等...

透笔度 ⋅ 2015/08/20 ⋅ 0

CSS3的动画属性

transition、animation和transform是CSS3中三个制作动画的重要属性,本篇文章主要对其进行学习了解。 一、transition 允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击...

⋅ 2017/12/26 ⋅ 0

css动画制作

深入CSS3 动画效果的总结详解 CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transit...

邓含月 ⋅ 2013/12/08 ⋅ 1

深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开 ⋅ 2014/04/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL主从复制原理、半同步操作步骤及原理

1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1、scp/sftp/nc 命令可以实现远程数据同步。 2、搭建ftp/http/svn/nfs 服务器,然后在客户端上也可以把数据同步到服务器。...

xiaomin0322 ⋅ 20分钟前 ⋅ 0

Oracle10g 数据及文件迁移过程[原]

QL*Plus: Release 10.2.0.1.0 - Production on 星期三 5月 11 10:22:35 2011 Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到: Oracle Database 10g Enterprise Edition Re......

harrypotter ⋅ 26分钟前 ⋅ 0

nginx安装

1:安装工具包 wget、vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ 2:下载nginx安装包 wget http://nginx.org/download/nginx-1......

壹丶贰 ⋅ 29分钟前 ⋅ 0

ideaVim安装及配置

1.安装插件 File-Settings-Plugins,Browse Repositories,输入ideavim,安装。 重启后,在Tools-Vim Emulator启用。 2.快捷键设置 ideaViim键与idea快捷键有冲突,可以在Settings-Other Se...

Funcy1122 ⋅ 33分钟前 ⋅ 0

MySQL中B+Tree索引原理

B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引。B+树中的B代表平衡(balance),而不是二叉(binary),因为B+树是从最早的平衡二叉树演化而来的。在讲B...

浮躁的码农 ⋅ 48分钟前 ⋅ 0

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 52分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 今天 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 今天 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部