文档章节

CSS transition动画没效果

落叶伴长风
 落叶伴长风
发布于 2016/12/01 09:46
字数 212
阅读 72
收藏 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
0
CSS动画简介

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

阮一峰
2014/02/14
0
0
CSS3 Transitions, Transforms和Animation使用简介与应用展示

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

黄金林
2016/12/21
7
0
css3动画简介以及动画库animate.css的使用

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

lovethe51cto
2016/01/12
0
0
css动画 简单的记录

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

hey卷
2016/07/21
18
0

没有更多内容

加载失败,请刷新页面

加载更多

GO冒泡,二分查找

package mainimport("fmt")func main() {var arr [5]int = [5]int{11,13,9,2,25}maopao(&arr)fmt.Println("arr = ", arr) //[2 9 11 13 25]findIndex := binaryFind(&arr, 0......

汤汤圆圆
17分钟前
1
0
工作2年半跳槽面试阿里,成功拿到offer,凭什么?

2015年刚毕业的我,进入了一家小小的公司实习工作,在学校学了三年软件开发的我,还是想去寻找一份互联网行业的工作,这样更能学以致用发挥自己的特长。一直到18年三月份,我辞掉已有的工作,...

java知识分子
21分钟前
1
0
讲述下:Linux的10个最危险的命令

导读 Linux命令行佷有用、很高效,也很有趣,但有时候也很危险,尤其是在你不确定你自己在正在做什么时候。这篇文章将会向你介绍十条命令,但你最好不要尝试着去使用。 当然,以下命令通常都...

问题终结者
25分钟前
1
0
分库分表后如何部署上线?

引言 我们先来讲一个段子 面试官:“有并发的经验没?” 应聘者:“有一点。” 面试官:“那你们为了处理并发,做了哪些优化?” 应聘者:“前后端分离啊,限流啊,分库分表啊。。” 面试官:...

Java烂猪皮
30分钟前
1
0
Redis源码阅读笔记-快速列表

快速列表 快速列表(quicklist)是由压缩列表(ziplist)组成的一个双向链表,链表中,每一个节点都是以压缩列表(ziplist)的结构保存。 在 Redis3.2 后加入的新数据结构,在列表键中取代了双向链...

Jian_Ming
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部