[fixed]bug de animação

src/Components/CardsAnimation.css

-.animation{
+.animatiOff{
   position: absolute;
   display: flex;
   background-color: inherit;
@@ -8,9 +8,10 @@
   padding-top: 20px;
   transition: left 1s;
   transition-delay: 0.5s;
+  z-index: 1;
 }
 
-.animationOn{
+.animatiOn{
   position: absolute;
   display: flex;
   left: 0px;
@@ -19,4 +20,5 @@
   height: 100%;
   padding-top: 20px;
   transition: left 2s;
+  z-index: 1;
 }

src/Components/CollectionCard.js

@@ -36,11 +36,9 @@ class RenderThumbs extends Component {
     if (this.props.thumbs) {
       var array = this.props.thumbs.slice(0,4);
     return(
-      <div>
       <Row>
         {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)}
       </Row>
-      </div>
     );
     }
     return(null);
@@ -50,26 +48,26 @@ class CollectionCard extends Component {
   constructor(props){
     super(props);
     this.state={
-      userStyle: "animation"
+      userStyle: "animatiOff"
     };
   }
   onHover(){
-    this.setState({userStyle: "animationOn"});
+    this.setState({userStyle: "animatiOn"});
   }
   onIddle(){
-    this.setState({userStyle: "animation"})
+    this.setState({userStyle: "animatiOff"})
   }
   render(){
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
      <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
+     <div className={this.state.userStyle}>{this.props.author}</div>
      <RenderThumbs thumbs={this.props.thumbnail}/>
      <div style={authorStyle}>
       <Typography  variant="body2" color="textSecondary" component="p">{this.props.author}</Typography>
       <Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography>
        </div>
      <div style={pictureStyle}> fotinha </div>
-     <div className={this.state.userStyle}>{this.props.author}</div>
 
      </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>

src/Components/ResourceCard.js

@@ -36,7 +36,7 @@ class ResourceCard extends Component {
     super(props);
     this.state={
       thumbnail: null,
-      userStyle: "animation",
+      userStyle: "animatiOff",
     };
 
   }
@@ -50,10 +50,10 @@ class ResourceCard extends Component {
     }
   }
   onHover(){
-    this.setState({userStyle: "animationOn"});
+    this.setState({userStyle: "animatiOn"});
   }
   onIddle(){
-    this.setState({userStyle: "animation"})
+    this.setState({userStyle: "animatiOff"})
   }
   render(){
   this.renderType(this.props.type)