animação correta, começo de requisição de coleções

src/Components/AreasSubPages.js

@@ -36,7 +36,7 @@ class ReqResources extends Component{
     });
   }
   render(){
-     var row1 = this.state.resources.slice(0, 4);
+      var row1 = this.state.resources.slice(0, 4);
       var row2 = this.state.resources.slice(4, 8);
       var row3 = this.state.resources.slice(8, 13);
     return(
@@ -55,6 +55,39 @@ class ReqResources extends Component{
   }
 }
 
+class ReqCollections extends Component{
+  constructor(props){
+    super(props);
+    this.state ={
+      collections: [],
+    };
+  }
+  componentDidMount(){
+    axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
+    .then(res=>{this.setState({collections: res.data});
+    console.log(res.data);
+  });
+  }
+  render(){
+      var row1 = this.state.collections.slice(0, 4);
+      var row2 = this.state.collections.slice(4, 8);
+      var row3 = this.state.collections.slice(8, 13);
+    return(
+      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+      <Row style={{paddingBottom: "5px"}}>
+      {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description}/></Col>)}
+      </Row>
+      <Row>
+      {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      </Row>
+      <Row>
+      {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      </Row>
+    </Carousel>
+    )
+  }
+}
+
 
 
 class SubPages extends Component{
@@ -134,14 +167,7 @@ class SubPages extends Component{
             <Container style={{padding:"20px"}}>
               <p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
                 Coleções mais recentes </p>
-              <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-              <Row>
-                <Col md={3}><CollectionCard name="doasi" rating="0"/></Col>
-                <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
-                <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
-                <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
-              </Row>
-              </Carousel>
+                <ReqCollections/>
             </Container>
         </React.Fragment>
           );

src/Components/CardsAnimation.css

@@ -2,20 +2,21 @@
   position: absolute;
   display: flex;
   background-color: inherit;
-  width: 0%;
+  width: 100%;
   height: 100%;
+  left: -260px;
   padding-top: 20px;
-  transition: width 2s;
-  visibility: hidden;
-  transition-delay: 1s;
+  transition: left 1s;
+  transition-delay: 0.5s;
 }
 
 .animationOn{
   position: absolute;
   display: flex;
+  left: 0px;
   background-color: inherit;
   width: 100%;
   height: 100%;
   padding-top: 20px;
-  transition: width 2s;
+  transition: left 2s;
 }

src/Components/CollectionCard.js

@@ -4,6 +4,7 @@ import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
+import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import FolderIcon from '@material-ui/icons/Folder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
@@ -12,7 +13,7 @@ import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg";
 var authorStyle={
   position: "absolute",
   display: "flex",
-  backgroundColor: "gray",
+  backgroundColor: "white",
   opacity: "0.6",
   bottom:"0",
   width: "100%",
@@ -46,9 +47,12 @@ class CollectionCard extends Component {
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
      <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
-     <div style={authorStyle}> Autor Autor <br/> authro</div>
+     <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}>aaaaaaaaaaa</div>
+     <div className={this.state.userStyle}>{this.props.author}</div>
      <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
 
      </Container>

src/Components/ResourceCard.js

@@ -73,7 +73,7 @@ class ResourceCard extends Component {
          starHoverColor="red"
          />
        </Container>
-       <CardActions style={{justifyContent: "space-between"}}>
+       <CardActions style={{justifyContent: "space-between", padding: "0px"}}>
        { this.props.type ==="Vídeo"
          ? <Video style={{color:"#ff7f00"}} />
        : <br/>}