文档章节

CSS transition动画没效果

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

没有更多内容

加载失败,请刷新页面

加载更多

当S8遇上边缘计算:谈阿里云ENS对直播业务场景的支撑

摘要: 类似S8赛事这样的大型活动直播的特点和技术挑战是什么?为什么业务要下沉到边缘?自建边缘节点和与云服务厂商合作到底该如何选择?边缘节点服务(ENS)又是如何进行技术支撑?提供的针...

阿里云官方博客
15分钟前
1
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
26分钟前
1
0
laravel定时器

民间高手: https://blog.csdn.net/zhezhebie/article/details/79205414 官方文档: https://laravel-china.org/docs/laravel/5.5/scheduling/1325...

vio小黑
48分钟前
0
0
Apache Zeppelin安装及使用

Apache Zeppelin官网:http://zeppelin.apache.org/ Apache Zeppelin介绍:A web-based notebook that enables interactive data analytics. You can make beautiful data-driven, interacti......

GordonNemo
49分钟前
4
0
关于python开发多个项目环境配置Anaconda

关于Anaconda用来管理Python的包和环境 下载并安装Anaconda 创建项目:windows键+R ==> 进入CMD => 输入conda create -n 项目名称 python=3 conda info -e 查看项目以及项目所在的位置,默认...

上官清偌
51分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部