Question

我想将转换应用于多个div类。我想制作一个动画节目，所以我需要动画很多div。我在互联网上尝试了所有可能的来源。

这是我的编码：

<html>
<head>

    <style>

    .line1 {
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
    }
    div:hover {
        width:400px;
    }
    </style>
    </head>
    <body>
<div class ="line1"></div>
</html>

Answer 1

请尝试以下操作： Demo

{{1}}

Answer 2

创建许多具有相同类的div是没有问题的。

<style>

.line1 {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
    div :hover {
        width:400px;
    }
</style>
</head>
    <body>
        <div class="line1">
        <div class="line1">
        <div class="line1">

或者为不同的过渡创建多个类：

.line1 {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
.line2 {
    width: 100px;
    height: 100px;
    background: black;
    transition: width 2s;
}
.line3 {
    width: 100px;
    height: 100px;
    background: green;
    transition: width 2s;
}
    div :hover {
        width:400px;
    }
</style>
</head>
    <body>
        <div class="line1">
        <div class="line2">
        <div class="line3">

Answer 3

在codepen http://codepen.io/antoniskamamis/pen/hjBrE

上查看此内容

这是一个很好的例子，使用css只能在一个严重的div之间进行转换。

HTML

<div class="container">
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

</div>

CSS

body{background:#000;}
.container{
  margin:50px auto;
  width:500px;
  height:300px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;

}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Answer 4

您需要在CSS中定义Transition类和过渡Hover类在给定的代码中创建Div标签（您想要转发）成员Trans class <div Class="Trans"> 这是代码

<html>
    <head>
    <style type="text/css">
        .Trans
        {
            margin:20px;
            width: 100px;
            height: 100px;
            transition: width 2s;
            background: gray;
        }
        .normal
        {
            margin:20px;
            width: 100px;
            height: 100px;
            background: gray;
        }
        Div.Trans:hover 
        {
            background: green;
            width:400px;
        }

    </style>
</head>
    <body>
        <div Class="Trans">Div Trans</div>
        <div class="normal" >Div_Normal</div>
        <div Class="Trans">Div Trans</div>
        <div class="normal" Div_Normal>Div_Normal</div>
    </body>
</html>

风格

 .Trans //Style You need to apply on transition
        transition: width 2s;//Transition Statement Must be included in .Trans Class

 .normal //Normal Div you don't need if you dont want to apply any style
 .Div.Trans: Hover //Olly apply hover of a Div Which Having class of Trans

您可以在给定的代码中检查它

.Trans {
  margin: 20px;
  width: 100px;
  height: 100px;
  transition: width 2s;
  background: red;
}
.normal {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: gray;
}
Div.Trans:hover {
  background: green;
  width: 400px;
}

<body>
  <div Class="Trans">Div_Trans</div>
  <div class="normal">Div_Normal</div>
  <div Class="Trans">Div_Trans</div>
  <div class="normal">Div_Normal</div>
</body>

Answer 5

不是将转换添加到每个类，而是将它们全部添加到逗号分隔列表中

.line1, .line2, .line3 {
    transition: 1s width ease;
}

将Transitions应用于多个div类

5 个答案: