Question

我可以通过使用以下css将其类改为.elementToFadeInAndOut来制作一个不透明度为零的元素：

.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

通过编辑同一个类的css，有没有办法让元素在淡入后淡出？

非常感谢你的时间。

Answer 1

使用css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

这是一个DEMO

＆＃13;

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

＆＃13;

<div class=elementToFadeInAndOut></div>

＆＃13;

阅读：Using CSS animations

您可以通过执行以下操作来清理代码：

＆＃13;

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}

＆＃13;

<div class=elementToFadeInAndOut></div>

＆＃13;

Answer 2

如果您需要单个淡入/淡出而没有明确的用户操作（例如鼠标悬停/鼠标移动），您可以使用CSS3 animation：http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut {
    -webkit-animation: fadeinout 4s linear 1 forwards;
    animation: fadeinout 4s linear 1 forwards;
}

@-webkit-keyframes fadeinout {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeinout {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

通过设置animation-fill-mode: forwards，动画将保留其最后一个关键帧

通过设置animation-iteration-count: 1，动画只会运行一次（如果需要多次重复此效果，请更改此值）

Answer 3

我发现此链接很有用：css-tricks fade-in fade-out css。

这是csstricks帖子的摘要：

CSS类：

public function createQuestions($bool) {
    $usee =  usee::query();
    $hour = $this->selectHourStart(Auth::User()->id);
    $usee
            ->selectRaw("products.name as name")
            ->select( DB::Raw("(DATE(IF(HOUR(usees.date) >= $hour, usees.date,Date_add(usees.date, INTERVAL - 1 DAY) )) )  AS dat "))

            ->selectRaw("hour(usees.date) as hour")
            ->selectRaw("sum(usees.portion) as por")
            ->selectRaw("day(usees.date) as day")
            ->selectRaw("month(usees.date) as month")
            ->selectRaw("year(usees.date) as year")                
            ->selectRaw("usees.portion as portion")
            ->selectRaw("usees.date as date")
            ->selectRaw("descriptions.description as description")
            ->selectRaw("descriptions.date as date_description")
            ->selectRaw("usees.id_products as product")
            ->leftjoin("products","products.id","usees.id_products")
            ->leftjoin("forwarding_descriptions","usees.id","forwarding_descriptions.id_usees")
            ->leftjoin("descriptions","descriptions.id","forwarding_descriptions.id_descriptions")

            ->where("usees.id_users",Auth::User()->id);
    if (Input::get("data1") != "") {
        $usee->where("usees.date",">=",Input::get("data1"));
    }
    if (Input::get("data2") != "") {
        $usee->where("usees.date","<=",Input::get("data2"));
    }
    if (Input::get("dose1") != "" and Input::get("day") == "") {
        $usee->where("usees.portion",">=",Input::get("dose1"));
    }
    if (Input::get("dose2") != "" and Input::get("day") == "") {
        $usee->where("usees.portion","<=",Input::get("dose2"));
    }
    if (Input::get("search") != "") {
        $usee->where("descriptions.description","like","%" . Input::get("search") . "%");
    }
    if (Input::get("inDay") != "") {
        $usee->where("descriptions.description","!=", "");
    }

    if ($bool == true) {
            $usee->whereIn("products.id",$this->id_product);
    }

在React中：

                $usee->groupBy("dat");
                if (Input::get("dose1") != "" ) {
                  $usee->havingRaw("sum(usees.portion) >= " . Input::get("dose1"));
                }
                if (Input::get("dose2") != "" ) {
                  $usee->havingRaw("sum(usees.portion) <= " . Input::get("dose2"));
                }
            }
            else {
                $usee->groupBy("usees.id");
            }
    $list =    $usee->orderBy(Input::get("sort"),"DESC")->paginate(200);
    //foreach ($list as $l) {
      //  print $l->name;
    //}
    return $list;

}

Answer 4

一种方法是将元素的颜色设置为黑色，然后像这样淡化为背景的颜色：

<style> 
p {
animation-name: example;
animation-duration: 2s;
}

@keyframes example {
from {color:black;}
to {color:white;}
}
</style>
<p>I am FADING!</p>

我希望这就是您所需要的！

Answer 5

试试这个：

@keyframes animationName {
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-o-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-moz-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}   
.elementToFadeInAndOut {
   -webkit-animation: animationName 5s infinite;
   -moz-animation: animationName 5s infinite;
   -o-animation: animationName 5s infinite;
    animation: animationName 5s infinite;
}

CSS如何使元素淡入淡出然后淡出？

5 个答案: