css3转换动画加载？_Css_Webkit_Css Transitions_Css Animations

css3转换动画加载？

css

css3转换动画加载？,css,webkit,css-transitions,css-animations,Css,Webkit,Css Transitions,Css Animations,是否可以在页面加载时使用CSS3转换动画而不使用Javascript 这正是我想要的，但在页面加载时：到目前为止我发现了什么，一种延迟元素效果的方法。仅适用于悬停，在负载下工作，但速度非常慢。正因为如此，它没有用处速度足够快，但在页面加载时不设置动画好吧，这是一个棘手的问题答案是“不是真的” CSS不是一个功能层。它不知道发生了什么或什么时候。它只是用来向不同的“标志”（类、ID、状态）添加一个表示层默认情况下，CSS/DOM不提供任何类型的“加载”状态供CSS使用。如果您想要

是否可以在页面加载时使用CSS3转换动画而不使用Javascript

这正是我想要的，但在页面加载时：

到目前为止我发现了什么

，一种延迟元素效果的方法。仅适用于悬停
，在负载下工作，但速度非常慢。正因为如此，它没有用处
速度足够快，但在页面加载时不设置动画

body

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

编辑请参见下面的评论：


$（文档）.ready（函数（）{
//iOS悬停事件类修复程序
if（（navigator.userAgent.match（/iPhone/i））| |（navigator.userAgent.match（/iPod/i））||
（navigator.userAgent.match（/iPad/i）））{
$（“.container.menu text”）。单击（function（）{//更新类以指向列表的开头
});
}
});

CSS

@关键帧从左滑入{
0% {
转化：translateX（-100%）；
}
100% {
变换：translateX（0）；
}
}
标题{
/*本节调用上面定义的slideInFromLeft动画*/
动画：1s从左滑出1s幻灯片；
背景：#333；
填充：30px；
}
/*为美观而添加*/body{margin:0；字体系列：“Segoe UI”，Arial，Helvetica，Sans Serif；}a{文本装饰：无；显示：内联块；右边距：10px；颜色：#fff；}

window.onload=function（）{
document.body.className+=“已加载”；
}

.fadein{
不透明度：0；
-moz转变：不透明度1.5s；
-webkit转换：不透明度1.5s；
-o-转变：不透明度1.5s；
过渡：不透明度1.5s；
}
body.loaded.fadein{
不透明度：1；
}

<body class="fadein" onload="this.style.opacity=1">


html:hover #animateelementid, body:hover #animateelementid {rotate ....}


<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

<body class="fadein" onload="this.style.opacity=1">

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

body.onload *{ transform: none !important; }

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}

<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'

const Hello = (props) => {
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        // For load
        setTimeout(function () {
            setLoaded(true);
        }, 50); // Browser needs some time to change to unload state/style

        // For unload
        return () => {
            setLoaded(false);
        };
    }, [props.someTrigger]); // Set your trigger

    return (
        <div
            css={[
                css`
                    opacity: 0;
                    transition: opacity 0s;
                `,
                loaded &&
                    css`
                        transition: opacity 2s;
                        opacity: 1;
                    `,
            ]}
        >
            hello
        </div>
    );
};

body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}