文档章节

CSS transition动画没效果

落叶伴长风
 落叶伴长风
发布于 2016/12/01 09:46
字数 212
阅读 99
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 前端web 黑科技
落叶伴长风
粉丝 0
博文 61
码字总数 7974
作品 0
南昌
程序员
私信 提问
CSS动画:animation、transition、transform、translate傻傻分不清

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

Vince_
2018/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
transform,transition,animation的混合使用——结业篇

css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做...

缘自世界
2017/05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
7
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
7
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
昨天
8
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
昨天
4
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部